diff --git a/src/vertex/app/changelog.md b/src/vertex/app/changelog.md
index 4154de352f..54e37c4f23 100644
--- a/src/vertex/app/changelog.md
+++ b/src/vertex/app/changelog.md
@@ -2,6 +2,58 @@
 
 > **Note**: This changelog consolidates all recent improvements, features, and fixes to the AirQo Vertex frontend.
 
+## Version 2.0.8
+**Released:** June 28, 2026
+
+### Comprehensive Unit Testing & CI Integration
+
+Introduced a robust unit testing infrastructure using Vitest and React Testing Library, alongside comprehensive CI/CD pipeline integration. This release focuses on improving code quality, ensuring robust component rendering, and validating API proxy behavior through extensive boundary testing.
+
+<details>
+<summary><strong>Test Infrastructure & CI Integration (3)</strong></summary>
+
+- **Vitest & React Testing Library**: Replaced legacy test runners with a fast, modern Vitest setup configured to work seamlessly with Next.js App Router and absolute imports.
+- **CI/CD Pipeline**: Added dedicated GitHub Actions workflows for automated type checking (`tsc --noEmit`) and unit testing (`vitest run --coverage`) on pull requests.
+- **Testing Guidelines**: Introduced `TESTING.md` internal documentation to standardize component rendering, user-event interactions, and mocking strategies across the team.
+
+</details>
+
+<details>
+<summary><strong>UI & Shared Component Testing (3)</strong></summary>
+
+- **Core UI Components**: Added comprehensive tests for 30+ shadcn/radix UI components (Dialogs, Accords, Tooltips, Buttons, Inputs, Forms, etc.) verifying accessibility and interaction states without snapshot testing.
+- **Shared Abstractions**: Extracted and tested shared wrappers including `ReusableTable`, `ReusableSelectInput`, `ReusableButton`, and `ReusableFileUpload`, ensuring robust prop forwarding and DOM nesting compliance.
+- **Warning Resolutions**: Proactively fixed React DOM nesting warnings (e.g., `<a>` cannot appear as a descendant of `<a>`) and accessibility label warnings across components during test implementation.
+
+</details>
+
+<details>
+<summary><strong>Service & API Boundary Testing (2)</strong></summary>
+
+- **Mock Factories**: Created `apiResponseFactory.ts` and NextAuth session mocks to simulate full HTTP environments locally without hitting live staging endpoints or needing `axios-mock-adapter`.
+- **Proxy Validation**: Validated both the Next.js App Router API handlers (`proxyClient`) and client-side Axios instances (`secureApiProxyClient`), verifying `JWT` vs `API_TOKEN` injection, error normalization, and custom event dispatching (`vertex-network-degraded`, `auth-token-expired`).
+
+</details>
+
+<details>
+<summary><strong>Files Modified & Added (40+)</strong></summary>
+
+- `package.json` [MODIFIED]
+- `vitest.config.ts` [NEW]
+- `.github/workflows/test.yml` [NEW]
+- `src/vertex/app/_docs/internal/TESTING.md` [NEW]
+- `src/vertex/components/ui/*.test.tsx` (30+ files) [NEW]
+- `src/vertex/components/shared/**/*.test.tsx` [NEW]
+- `src/vertex/core/services/*.test.ts` [NEW]
+- `src/vertex/core/utils/*.test.ts` [NEW]
+- `src/vertex/test/factories/apiResponseFactory.ts` [NEW]
+- `src/vertex/test/mocks/nextAuth.ts` [NEW]
+- `src/vertex/vitest.setup.ts` [NEW]
+
+</details>
+
+---
+
 ## Version 2.0.7
 **Released:** June 17, 2026
 
diff --git a/src/vertex/components/shared/button/ReusableButton.test.tsx b/src/vertex/components/shared/button/ReusableButton.test.tsx
new file mode 100644
index 0000000000..a29a4b26f3
--- /dev/null
+++ b/src/vertex/components/shared/button/ReusableButton.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import ReusableButton from "./ReusableButton";
+
+describe("ReusableButton", () => {
+  it("renders as a button by default", () => {
+    render(<ReusableButton>Click me</ReusableButton>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+
+  it("renders as an anchor when path is provided", () => {
+    render(<ReusableButton path="/home">Go Home</ReusableButton>);
+    expect(screen.getByRole("link", { name: "Go Home" })).toBeInTheDocument();
+  });
+
+  it("handles loading state", () => {
+    render(<ReusableButton loading>Submit</ReusableButton>);
+    const button = screen.getByRole("button", { name: "Submit" });
+    expect(button).toHaveAttribute("aria-busy", "true");
+    expect(button).toBeDisabled();
+  });
+
+  it("renders tooltip span when disabled with permission", () => {
+    render(<ReusableButton disabled permission="CREATE_USER">Action</ReusableButton>);
+    const actionText = screen.getByText("Action");
+    expect(actionText).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/shared/card/CardWrapper.test.tsx b/src/vertex/components/shared/card/CardWrapper.test.tsx
new file mode 100644
index 0000000000..e9507e3a31
--- /dev/null
+++ b/src/vertex/components/shared/card/CardWrapper.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import Card from "./CardWrapper";
+
+describe("CardWrapper", () => {
+  it("renders with basic content", () => {
+    render(<Card>Card Content</Card>);
+    expect(screen.getByText("Card Content")).toBeInTheDocument();
+  });
+
+  it("renders with headers and footers", () => {
+    render(
+      <Card header={<div data-testid="header">Header</div>} footer={<div data-testid="footer">Footer</div>}>
+        Content
+      </Card>
+    );
+    expect(screen.getByTestId("header")).toBeInTheDocument();
+    expect(screen.getByTestId("footer")).toBeInTheDocument();
+  });
+
+  it("handles clicks", async () => {
+    const handleClick = vi.fn();
+    render(<Card onClick={handleClick} testId="clickable-card">Content</Card>);
+    await userEvent.click(screen.getByTestId("clickable-card"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/vertex/components/shared/fileupload/ReusableFileUpload.test.tsx b/src/vertex/components/shared/fileupload/ReusableFileUpload.test.tsx
new file mode 100644
index 0000000000..9b54d69065
--- /dev/null
+++ b/src/vertex/components/shared/fileupload/ReusableFileUpload.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import ReusableFileUpload from "./ReusableFileUpload";
+
+describe("ReusableFileUpload", () => {
+  it("renders with placeholder and label", () => {
+    render(<ReusableFileUpload label="Upload File" />);
+    expect(screen.getByLabelText("Upload File")).toBeInTheDocument();
+    expect(screen.getByText("Upload file")).toBeInTheDocument(); // default placeholder
+  });
+
+  it("handles file selection", () => {
+    const handleChange = vi.fn();
+    render(<ReusableFileUpload label="Upload" onChange={handleChange} />);
+    
+    const file = new File(["hello"], "hello.png", { type: "image/png" });
+    const input = screen.getByLabelText("Upload");
+    
+    fireEvent.change(input, { target: { files: [file] } });
+    expect(handleChange).toHaveBeenCalledWith(file);
+  });
+
+  it("shows error state", () => {
+    render(<ReusableFileUpload label="Upload" error="File too large" />);
+    expect(screen.getByText("File too large")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/shared/inputfield/ReusableInputField.test.tsx b/src/vertex/components/shared/inputfield/ReusableInputField.test.tsx
new file mode 100644
index 0000000000..9a5eca5fb2
--- /dev/null
+++ b/src/vertex/components/shared/inputfield/ReusableInputField.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import ReusableInputField from "./ReusableInputField";
+
+// Mock toast to avoid missing canvas/window functions in jsdom sometimes or to just isolate
+vi.mock("../toast/ReusableToast", () => ({
+  default: vi.fn(),
+}));
+
+// Mock clipboard
+Object.assign(navigator, {
+  clipboard: {
+    writeText: vi.fn(),
+  },
+});
+
+describe("ReusableInputField", () => {
+  it("renders basic input", () => {
+    render(<ReusableInputField label="Email" placeholder="Enter email" />);
+    expect(screen.getByLabelText("Email")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument();
+  });
+
+  it("shows error message", () => {
+    render(<ReusableInputField label="Email" error="Invalid email" />);
+    expect(screen.getByText("Invalid email")).toBeInTheDocument();
+  });
+
+  it("toggles password visibility", async () => {
+    render(<ReusableInputField label="Password" type="password" />);
+    const input = screen.getByLabelText("Password");
+    expect(input).toHaveAttribute("type", "password");
+
+    const toggleBtn = screen.getByRole("button", { name: /show password/i });
+    await userEvent.click(toggleBtn);
+    expect(input).toHaveAttribute("type", "text");
+    
+    await userEvent.click(screen.getByRole("button", { name: /hide password/i }));
+    expect(input).toHaveAttribute("type", "password");
+  });
+
+  it("calls custom action", async () => {
+    const handleAction = vi.fn();
+    const MockIcon = () => <div data-testid="custom-icon" />;
+    
+    render(
+      <ReusableInputField 
+        label="Search" 
+        customActionIcon={MockIcon} 
+        onCustomAction={handleAction} 
+        customActionLabel="Do search"
+      />
+    );
+    
+    const actionBtn = screen.getByRole("button", { name: "Do search" });
+    await userEvent.click(actionBtn);
+    expect(handleAction).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/vertex/components/shared/select/ReusableSelectInput.test.tsx b/src/vertex/components/shared/select/ReusableSelectInput.test.tsx
new file mode 100644
index 0000000000..28a877149e
--- /dev/null
+++ b/src/vertex/components/shared/select/ReusableSelectInput.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import ReusableSelectInput from "./ReusableSelectInput";
+
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
+
+describe("ReusableSelectInput", () => {
+  it("renders placeholder correctly", () => {
+    render(
+      <ReusableSelectInput label="Fruit" placeholder="Pick fruit">
+        <option value="apple">Apple</option>
+      </ReusableSelectInput>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(screen.getByText("Pick fruit")).toBeInTheDocument();
+  });
+
+  it("shows options and handles selection", async () => {
+    const handleChange = vi.fn();
+    render(
+      <ReusableSelectInput label="Fruit" onChange={handleChange}>
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+      </ReusableSelectInput>
+    );
+
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    const bananaOption = screen.getByText("Banana");
+    
+    await userEvent.click(bananaOption);
+
+    expect(handleChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({ value: "banana" })
+      })
+    );
+  });
+
+  it("handles keyboard navigation", async () => {
+    render(
+      <ReusableSelectInput label="Fruit">
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+      </ReusableSelectInput>
+    );
+
+    const button = screen.getByRole("button");
+    button.focus();
+    
+    // Open with arrow down
+    fireEvent.keyDown(button, { key: "ArrowDown" });
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/shared/table/ReusableTable.test.tsx b/src/vertex/components/shared/table/ReusableTable.test.tsx
new file mode 100644
index 0000000000..d0689573e5
--- /dev/null
+++ b/src/vertex/components/shared/table/ReusableTable.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import ReusableTable from "./ReusableTable";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: vi.fn() }),
+  usePathname: () => "/test-path",
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+vi.mock("@/context/banner-context", () => ({
+  useBanner: () => ({ showBanner: vi.fn(), hideBanner: vi.fn() }),
+}));
+
+describe("ReusableTable", () => {
+  it("renders with empty data", () => {
+    render(<ReusableTable columns={[]} data={[]} title="Test Table" />);
+    expect(screen.getByText("Test Table")).toBeInTheDocument();
+    expect(screen.getByText("No data available")).toBeInTheDocument();
+  });
+
+  it("renders data correctly", () => {
+    const columns = [
+      { key: "name", render: (val: unknown) => String(val) },
+    ];
+    const data = [
+      { id: 1, name: "Alice" },
+      { id: 2, name: "Bob" }
+    ];
+
+    render(<ReusableTable columns={columns as never} data={data} />);
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/shared/table/ReusableTable.tsx b/src/vertex/components/shared/table/ReusableTable.tsx
index caa9e8835c..2b6c25c752 100644
--- a/src/vertex/components/shared/table/ReusableTable.tsx
+++ b/src/vertex/components/shared/table/ReusableTable.tsx
@@ -1472,7 +1472,7 @@ const ReusableTable = <T extends TableItem>({
       )}
 
       {/* Add CSS to hide scrollbar on thead */}
-      <style jsx>{`
+      <style>{`
       .scrollbar-hide::-webkit-scrollbar {
         display: none;
       }
@@ -1504,22 +1504,4 @@ const ReusableTable = <T extends TableItem>({
   );
 };
 
-ReusableTable.defaultProps = {
-  title: "Table",
-  data: [],
-  columns: [],
-  searchable: true,
-  filterable: true,
-  filters: [],
-  pageSize: 10,
-  showPagination: true,
-  sortable: true,
-  pageSizeOptions: [5, 10, 20, 50, 100],
-  loading: false,
-  multiSelect: false,
-  actions: [],
-  tableId: undefined,
-  stickyHeader: false,
-};
-
 export default ReusableTable;
diff --git a/src/vertex/components/shared/toast/ReusableToast.test.tsx b/src/vertex/components/shared/toast/ReusableToast.test.tsx
new file mode 100644
index 0000000000..4c63909df5
--- /dev/null
+++ b/src/vertex/components/shared/toast/ReusableToast.test.tsx
@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Toaster, toast } from "./ReusableToast";
+import ReusableToast from "./ReusableToast";
+
+describe("ReusableToast", () => {
+  it("can render the Toaster component", () => {
+    const { container } = render(<Toaster />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it("exports toast methods", () => {
+    expect(typeof toast.success).toBe("function");
+    expect(typeof toast.error).toBe("function");
+    expect(typeof ReusableToast).toBe("function");
+  });
+});
diff --git a/src/vertex/components/ui/ErrorBoundary.test.tsx b/src/vertex/components/ui/ErrorBoundary.test.tsx
new file mode 100644
index 0000000000..9ec8059326
--- /dev/null
+++ b/src/vertex/components/ui/ErrorBoundary.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import ErrorBoundary from "./ErrorBoundary";
+
+const ThrowError = () => {
+  throw new Error("Test error");
+};
+
+describe("ErrorBoundary", () => {
+  it("catches errors and displays fallback", () => {
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const preventError = (e: ErrorEvent) => e.preventDefault();
+    window.addEventListener("error", preventError);
+    try {
+      render(
+        <ErrorBoundary>
+          <ThrowError />
+        </ErrorBoundary>
+      );
+
+      expect(screen.getByText("Sorry.. there was an error")).toBeInTheDocument();
+    } finally {
+      window.removeEventListener("error", preventError);
+      consoleError.mockRestore();
+    }
+  });
+});
diff --git a/src/vertex/components/ui/accordion.test.tsx b/src/vertex/components/ui/accordion.test.tsx
new file mode 100644
index 0000000000..049089ae9c
--- /dev/null
+++ b/src/vertex/components/ui/accordion.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./accordion";
+
+describe("Accordion", () => {
+  it("expands and collapses", async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Open Item 1</AccordionTrigger>
+          <AccordionContent>Item 1 Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    // Initial state: content shouldn't be in the document or should be hidden
+    expect(screen.queryByText("Item 1 Content")).not.toBeInTheDocument();
+    
+    await userEvent.click(screen.getByRole("button", { name: "Open Item 1" }));
+    
+    // Radix animates it in, but it should be placed in the DOM right away
+    expect(screen.getByText("Item 1 Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/alert-dialog.test.tsx b/src/vertex/components/ui/alert-dialog.test.tsx
new file mode 100644
index 0000000000..0c476d07d9
--- /dev/null
+++ b/src/vertex/components/ui/alert-dialog.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "./alert-dialog";
+
+describe("AlertDialog", () => {
+  it("opens alert dialog", async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+
+    expect(screen.queryByText("Are you sure?")).not.toBeInTheDocument();
+    
+    await userEvent.click(screen.getByRole("button", { name: "Open" }));
+    
+    expect(await screen.findByText("Are you sure?")).toBeInTheDocument();
+    expect(screen.getByText("This cannot be undone.")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/alert.test.tsx b/src/vertex/components/ui/alert.test.tsx
new file mode 100644
index 0000000000..1047fcb7b5
--- /dev/null
+++ b/src/vertex/components/ui/alert.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Alert, AlertDescription, AlertTitle } from "./alert";
+
+describe("Alert", () => {
+  it("renders correctly", () => {
+    render(
+      <Alert>
+        <AlertTitle>Error!</AlertTitle>
+        <AlertDescription>Something went wrong.</AlertDescription>
+      </Alert>
+    );
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 5, name: "Error!" })).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
+  });
+
+  it("applies variant classes", () => {
+    render(<Alert variant="destructive" data-testid="alert-dest" />);
+    const alert = screen.getByTestId("alert-dest");
+    expect(alert.className).toContain("destructive");
+  });
+});
diff --git a/src/vertex/components/ui/avatar.test.tsx b/src/vertex/components/ui/avatar.test.tsx
new file mode 100644
index 0000000000..5e447fa13c
--- /dev/null
+++ b/src/vertex/components/ui/avatar.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Avatar, AvatarFallback } from "./avatar";
+
+describe("Avatar", () => {
+  it("renders fallback", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+    expect(screen.getByText("JD")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/badge.test.tsx b/src/vertex/components/ui/badge.test.tsx
new file mode 100644
index 0000000000..f9210c002e
--- /dev/null
+++ b/src/vertex/components/ui/badge.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders with default variant", () => {
+    render(<Badge>Default</Badge>);
+    const badge = screen.getByText("Default");
+    expect(badge).toBeInTheDocument();
+    expect(badge.className).toContain("bg-primary");
+  });
+
+  it("renders with destructive variant", () => {
+    render(<Badge variant="destructive">Error</Badge>);
+    expect(screen.getByText("Error").className).toContain("bg-destructive");
+  });
+});
diff --git a/src/vertex/components/ui/banner.test.tsx b/src/vertex/components/ui/banner.test.tsx
new file mode 100644
index 0000000000..69e5c1b442
--- /dev/null
+++ b/src/vertex/components/ui/banner.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { SuccessBanner, InfoBanner } from "./banner";
+
+describe("Banner", () => {
+  it("renders success banner correctly", () => {
+    render(<SuccessBanner title="Success" message="Action was successful" />);
+    expect(screen.getByText("Success")).toBeInTheDocument();
+    expect(screen.getByText("Action was successful")).toBeInTheDocument();
+  });
+
+  it("handles dismiss click", async () => {
+    const handleDismiss = vi.fn();
+    render(<InfoBanner message="Information" dismissible onDismiss={handleDismiss} />);
+    
+    await userEvent.click(screen.getByRole("button", { name: "Dismiss" }));
+    expect(handleDismiss).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/vertex/components/ui/button.test.tsx b/src/vertex/components/ui/button.test.tsx
new file mode 100644
index 0000000000..2618264e14
--- /dev/null
+++ b/src/vertex/components/ui/button.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Button } from "./button";
+
+describe("Button", () => {
+  it("renders correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
+  });
+
+  it("fires onClick handler", async () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    
+    await userEvent.click(screen.getByRole("button", { name: "Click me" }));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("is disabled when disabled prop is passed", () => {
+    render(<Button disabled>Click me</Button>);
+    expect(screen.getByRole("button", { name: "Click me" })).toBeDisabled();
+  });
+
+  it("renders as child element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    );
+    expect(screen.getByRole("link", { name: "Link Button" })).toBeInTheDocument();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/calendar.test.tsx b/src/vertex/components/ui/calendar.test.tsx
new file mode 100644
index 0000000000..9863a9cbcb
--- /dev/null
+++ b/src/vertex/components/ui/calendar.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Calendar } from "./calendar";
+
+describe("Calendar", () => {
+  it("renders properly", () => {
+    render(<Calendar mode="single" selected={new Date(2026, 5, 15)} />);
+    expect(screen.getByText("15")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/card.test.tsx b/src/vertex/components/ui/card.test.tsx
new file mode 100644
index 0000000000..cc9cae3bc7
--- /dev/null
+++ b/src/vertex/components/ui/card.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./card";
+
+describe("Card", () => {
+  it("renders all card parts", () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Content</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+    );
+
+    expect(screen.getByText("Title")).toBeInTheDocument();
+    expect(screen.getByText("Description")).toBeInTheDocument();
+    expect(screen.getByText("Content")).toBeInTheDocument();
+    expect(screen.getByText("Footer")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/chart.test.tsx b/src/vertex/components/ui/chart.test.tsx
new file mode 100644
index 0000000000..95da0c3a38
--- /dev/null
+++ b/src/vertex/components/ui/chart.test.tsx
@@ -0,0 +1,34 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ChartContainer } from "./chart";
+import { BarChart, Bar } from "recharts";
+
+import { setupResizeObserverMock } from "@/test/utils/domMocks";
+
+setupResizeObserverMock();
+
+vi.mock("recharts", async () => {
+  const OriginalRecharts = await vi.importActual<Record<string, unknown>>("recharts");
+  return {
+    ...OriginalRecharts,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 800, height: 800 }}>{children}</div>
+    ),
+  };
+});
+
+describe("ChartContainer", () => {
+  it("renders without crashing", () => {
+    const config = { desktop: { label: "Desktop", color: "blue" } };
+    const { container } = render(
+      <div style={{ width: 100, height: 100 }}>
+        <ChartContainer config={config}>
+          <BarChart data={[{ x: 1, y: 2 }]}>
+            <Bar dataKey="y" />
+          </BarChart>
+        </ChartContainer>
+      </div>
+    );
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/checkbox.test.tsx b/src/vertex/components/ui/checkbox.test.tsx
new file mode 100644
index 0000000000..18a7f3f506
--- /dev/null
+++ b/src/vertex/components/ui/checkbox.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Checkbox } from "./checkbox";
+
+describe("Checkbox", () => {
+  it("can be checked and unchecked", async () => {
+    const handleChange = vi.fn();
+    render(<Checkbox onCheckedChange={handleChange} aria-label="Accept terms" />);
+    
+    const checkbox = screen.getByRole("checkbox", { name: "Accept terms" });
+    expect(checkbox).toHaveAttribute("aria-checked", "false");
+    
+    await userEvent.click(checkbox);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/vertex/components/ui/collapsible.test.tsx b/src/vertex/components/ui/collapsible.test.tsx
new file mode 100644
index 0000000000..9f91e9f9b1
--- /dev/null
+++ b/src/vertex/components/ui/collapsible.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";
+
+describe("Collapsible", () => {
+  it("expands and collapses", async () => {
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Content</CollapsibleContent>
+      </Collapsible>
+    );
+
+    expect(screen.queryByText("Content")).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText("Toggle"));
+    expect(screen.getByText("Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/combobox.test.tsx b/src/vertex/components/ui/combobox.test.tsx
new file mode 100644
index 0000000000..f9a47b43ea
--- /dev/null
+++ b/src/vertex/components/ui/combobox.test.tsx
@@ -0,0 +1,34 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { ComboBox } from "./combobox";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+window.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe("ComboBox", () => {
+  it("renders and selects", async () => {
+    const handleChange = vi.fn();
+    const options = [
+      { value: "apple", label: "Apple" },
+      { value: "banana", label: "Banana" },
+    ];
+
+    render(<ComboBox options={options} onValueChange={handleChange} placeholder="Select fruit" />);
+
+    const button = screen.getByRole("combobox");
+    expect(screen.getByText("Select fruit")).toBeInTheDocument();
+    
+    await userEvent.click(button);
+    await userEvent.click(screen.getByText("Banana"));
+
+    expect(handleChange).toHaveBeenCalledWith("banana");
+  });
+});
diff --git a/src/vertex/components/ui/command.test.tsx b/src/vertex/components/ui/command.test.tsx
new file mode 100644
index 0000000000..f9172cc395
--- /dev/null
+++ b/src/vertex/components/ui/command.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Command, CommandInput, CommandList, CommandItem, CommandEmpty, CommandGroup } from "./command";
+
+window.HTMLElement.prototype.scrollIntoView = () => {};
+
+window.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe("Command", () => {
+  it("renders structure", () => {
+    render(
+      <Command>
+        <CommandInput placeholder="Search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Fruits">
+            <CommandItem>Apple</CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    );
+    expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+    expect(screen.getByText("Fruits")).toBeInTheDocument();
+    expect(screen.getByText("Apple")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/custom-dialog.test.tsx b/src/vertex/components/ui/custom-dialog.test.tsx
new file mode 100644
index 0000000000..ed962e654a
--- /dev/null
+++ b/src/vertex/components/ui/custom-dialog.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { CustomDialogContent } from "./custom-dialog";
+
+describe("CustomDialogContent", () => {
+  it("renders when open", () => {
+    render(
+      <DialogPrimitive.Root open>
+        <CustomDialogContent>
+          <DialogPrimitive.Title>Dialog Title</DialogPrimitive.Title>
+          <DialogPrimitive.Description>Dialog Description</DialogPrimitive.Description>
+          Custom Content
+        </CustomDialogContent>
+      </DialogPrimitive.Root>
+    );
+    expect(screen.getByText("Custom Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/date-picker.test.tsx b/src/vertex/components/ui/date-picker.test.tsx
new file mode 100644
index 0000000000..b6983586f7
--- /dev/null
+++ b/src/vertex/components/ui/date-picker.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { DatePicker } from "./date-picker";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+describe("DatePicker", () => {
+  it("opens calendar", async () => {
+    render(<DatePicker onChange={vi.fn()} />);
+    const button = screen.getByRole("button", { name: /pick a date/i });
+    
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    await userEvent.click(button);
+    
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/dialog.test.tsx b/src/vertex/components/ui/dialog.test.tsx
new file mode 100644
index 0000000000..c3996e5fc2
--- /dev/null
+++ b/src/vertex/components/ui/dialog.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+describe("Dialog", () => {
+  // Radix UI components use PointerEvents internally, which JSDOM doesn't support well
+
+  it("opens and closes correctly", async () => {
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogDescription>Dialog Description</DialogDescription>
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
+    );
+
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Open Dialog" }));
+
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toBeInTheDocument();
+    expect(screen.getByText("Dialog Title")).toBeInTheDocument();
+    expect(screen.getByText("Dialog Description")).toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+  });
+});
diff --git a/src/vertex/components/ui/dropdown-menu.test.tsx b/src/vertex/components/ui/dropdown-menu.test.tsx
new file mode 100644
index 0000000000..8abfeb98e3
--- /dev/null
+++ b/src/vertex/components/ui/dropdown-menu.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+describe("DropdownMenu", () => {
+
+  it("opens menu and shows items", async () => {
+    render(
+      <DropdownMenu>
+        <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Item 1</DropdownMenuItem>
+          <DropdownMenuItem>Item 2</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("button", { name: "Open Menu" }));
+
+    const menu = await screen.findByRole("menu");
+    expect(menu).toBeInTheDocument();
+
+    expect(screen.getByRole("menuitem", { name: "Item 1" })).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: "Item 2" })).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/empty-state.test.tsx b/src/vertex/components/ui/empty-state.test.tsx
new file mode 100644
index 0000000000..455fc13d3d
--- /dev/null
+++ b/src/vertex/components/ui/empty-state.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { EmptyState } from "./empty-state";
+
+describe("EmptyState", () => {
+  it("renders with correct text and action", () => {
+    render(
+      <EmptyState
+        icon={<div data-testid="test-icon" />}
+        title="No Data"
+        description="There is no data to show."
+        action={<button>Add Data</button>}
+      />
+    );
+
+    expect(screen.getByTestId("test-icon")).toBeInTheDocument();
+    expect(screen.getByRole("heading", { level: 3, name: "No Data" })).toBeInTheDocument();
+    expect(screen.getByText("There is no data to show.")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Add Data" })).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/forbidden-error.test.tsx b/src/vertex/components/ui/forbidden-error.test.tsx
new file mode 100644
index 0000000000..9f64126d68
--- /dev/null
+++ b/src/vertex/components/ui/forbidden-error.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ForbiddenError } from "./forbidden-error";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ back: vi.fn() })
+}));
+vi.mock("react-redux", () => ({
+  useDispatch: () => vi.fn()
+}));
+
+describe("ForbiddenError", () => {
+  it("renders default message", () => {
+    render(<ForbiddenError />);
+    expect(screen.getByText("You don't have access rights to this page.")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/forbidden-page.test.tsx b/src/vertex/components/ui/forbidden-page.test.tsx
new file mode 100644
index 0000000000..5d47c87c04
--- /dev/null
+++ b/src/vertex/components/ui/forbidden-page.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ForbiddenPage } from "./forbidden-page";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ back: vi.fn() })
+}));
+vi.mock("react-redux", () => ({
+  useDispatch: () => vi.fn()
+}));
+
+describe("ForbiddenPage", () => {
+  it("renders with custom message", () => {
+    render(<ForbiddenPage message="Custom forbidden message" />);
+    expect(screen.getByText("Custom forbidden message")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/form.test.tsx b/src/vertex/components/ui/form.test.tsx
new file mode 100644
index 0000000000..6b9de2fffa
--- /dev/null
+++ b/src/vertex/components/ui/form.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { useForm } from "react-hook-form";
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "./form";
+
+const TestForm = () => {
+  const form = useForm({ defaultValues: { username: "" } });
+  return (
+    <Form {...form}>
+      <FormField
+        control={form.control}
+        name="username"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>Username</FormLabel>
+            <FormControl>
+              <input {...field} placeholder="Enter username" />
+            </FormControl>
+            <FormDescription>Your unique handle.</FormDescription>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </Form>
+  );
+};
+
+describe("Form", () => {
+  it("renders form fields correctly", () => {
+    render(<TestForm />);
+    expect(screen.getByText("Username")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter username")).toBeInTheDocument();
+    expect(screen.getByText("Your unique handle.")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/hcaptcha-widget.test.tsx b/src/vertex/components/ui/hcaptcha-widget.test.tsx
new file mode 100644
index 0000000000..4fe1f084ea
--- /dev/null
+++ b/src/vertex/components/ui/hcaptcha-widget.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { HCaptchaWidget } from "./hcaptcha-widget";
+import React from "react";
+
+vi.mock("@/lib/envConstants", () => ({
+  getHCaptchaSiteKey: () => "test-site-key",
+  getEnvironment: () => "test",
+  isHCaptchaEnabled: () => true
+}));
+
+vi.mock("@hcaptcha/react-hcaptcha", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const React = require("react");
+  const MockHCaptcha = React.forwardRef(({ sitekey }: { sitekey: string }) => (
+    <div data-testid="mock-hcaptcha" data-sitekey={sitekey} />
+  ));
+  MockHCaptcha.displayName = "MockHCaptcha";
+  return { default: MockHCaptcha };
+});
+
+describe("HCaptchaWidget", () => {
+  it("renders concrete captcha when enabled and site-key is present", () => {
+    render(<HCaptchaWidget onVerify={vi.fn()} onExpire={vi.fn()} />);
+    
+    const hcaptchaElement = screen.getByTestId("mock-hcaptcha");
+    expect(hcaptchaElement).toBeInTheDocument();
+    expect(hcaptchaElement).toHaveAttribute("data-sitekey", "test-site-key");
+  });
+});
diff --git a/src/vertex/components/ui/hover-card.test.tsx b/src/vertex/components/ui/hover-card.test.tsx
new file mode 100644
index 0000000000..777177ad6f
--- /dev/null
+++ b/src/vertex/components/ui/hover-card.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "./hover-card";
+
+describe("HoverCard", () => {
+  it("renders content", () => {
+    render(
+      <HoverCard open>
+        <HoverCardTrigger>Hover me</HoverCardTrigger>
+        <HoverCardContent>Hover Content</HoverCardContent>
+      </HoverCard>
+    );
+
+    expect(screen.getByText("Hover Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/input.test.tsx b/src/vertex/components/ui/input.test.tsx
new file mode 100644
index 0000000000..6cddc95f38
--- /dev/null
+++ b/src/vertex/components/ui/input.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Input } from "./input";
+
+describe("Input", () => {
+  it("renders correctly", () => {
+    render(<Input placeholder="Enter text" />);
+    expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
+  });
+
+  it("handles user input", async () => {
+    render(<Input placeholder="Email" />);
+    const input = screen.getByPlaceholderText("Email");
+    
+    await userEvent.type(input, "test@example.com");
+    expect(input).toHaveValue("test@example.com");
+  });
+
+  it("can be disabled", () => {
+    render(<Input placeholder="Email" disabled />);
+    expect(screen.getByPlaceholderText("Email")).toBeDisabled();
+  });
+});
diff --git a/src/vertex/components/ui/label.test.tsx b/src/vertex/components/ui/label.test.tsx
new file mode 100644
index 0000000000..e3fb43b0f5
--- /dev/null
+++ b/src/vertex/components/ui/label.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Label } from "./label";
+
+describe("Label", () => {
+  it("renders text content", () => {
+    render(<Label htmlFor="test-input">Test Label</Label>);
+    const label = screen.getByText("Test Label");
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute("for", "test-input");
+  });
+});
diff --git a/src/vertex/components/ui/multi-select.test.tsx b/src/vertex/components/ui/multi-select.test.tsx
new file mode 100644
index 0000000000..c4f0f5c809
--- /dev/null
+++ b/src/vertex/components/ui/multi-select.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { MultiSelectCombobox } from "./multi-select";
+
+import { setupPointerEventMock, setupResizeObserverMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+setupResizeObserverMock();
+
+describe("MultiSelectCombobox", () => {
+  it("renders correctly with placeholder", () => {
+    render(<MultiSelectCombobox options={[]} value={[]} onValueChange={vi.fn()} placeholder="Select tags" />);
+    expect(screen.getByText("Select tags")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/pagination.test.tsx b/src/vertex/components/ui/pagination.test.tsx
new file mode 100644
index 0000000000..185be6724b
--- /dev/null
+++ b/src/vertex/components/ui/pagination.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "./pagination";
+
+describe("Pagination", () => {
+  it("renders standard pagination controls", () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+
+    expect(screen.getByText("Previous")).toBeInTheDocument();
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("Next")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/permission-tooltip.test.tsx b/src/vertex/components/ui/permission-tooltip.test.tsx
new file mode 100644
index 0000000000..b2657a7a42
--- /dev/null
+++ b/src/vertex/components/ui/permission-tooltip.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import PermissionTooltip from "./permission-tooltip";
+
+vi.mock("@/components/ui/tooltip", () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Tooltip: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  TooltipTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  TooltipContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>
+}));
+
+describe("PermissionTooltip", () => {
+  it("renders tooltip with permissions", () => {
+    render(
+      <PermissionTooltip permissions={["admin:read"]}>
+        <button>Restricted Action</button>
+      </PermissionTooltip>
+    );
+
+    expect(screen.getByText("admin:read")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/popover.test.tsx b/src/vertex/components/ui/popover.test.tsx
new file mode 100644
index 0000000000..b8b098df20
--- /dev/null
+++ b/src/vertex/components/ui/popover.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+describe("Popover", () => {
+  it("shows popover content on click", async () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Popover Text</PopoverContent>
+      </Popover>
+    );
+
+    expect(screen.queryByText("Popover Text")).not.toBeInTheDocument();
+    
+    await userEvent.click(screen.getByRole("button", { name: "Open" }));
+    
+    expect(await screen.findByText("Popover Text")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/progress.test.tsx b/src/vertex/components/ui/progress.test.tsx
new file mode 100644
index 0000000000..2acb7b7ba1
--- /dev/null
+++ b/src/vertex/components/ui/progress.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Progress } from "./progress";
+
+describe("Progress", () => {
+  it("renders without crashing", () => {
+    const { container } = render(<Progress value={45} />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/scroll-area.test.tsx b/src/vertex/components/ui/scroll-area.test.tsx
new file mode 100644
index 0000000000..06565cd02c
--- /dev/null
+++ b/src/vertex/components/ui/scroll-area.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ScrollArea } from "./scroll-area";
+
+window.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe("ScrollArea", () => {
+  it("renders children inside scroll viewport", () => {
+    render(
+      <ScrollArea>
+        <div>Scrollable Content</div>
+      </ScrollArea>
+    );
+    expect(screen.getByText("Scrollable Content")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/select-field.test.tsx b/src/vertex/components/ui/select-field.test.tsx
new file mode 100644
index 0000000000..f43a99b26c
--- /dev/null
+++ b/src/vertex/components/ui/select-field.test.tsx
@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import SelectField from "./select-field";
+
+window.HTMLElement.prototype.scrollIntoView = () => {};
+
+describe("SelectField", () => {
+  it("renders with options and triggers onChange", async () => {
+    const handleChange = vi.fn();
+    render(
+      <SelectField onChange={handleChange} label="My Field">
+        <option value="1">One</option>
+        <option value="2">Two</option>
+      </SelectField>
+    );
+
+    expect(screen.getByText("My Field")).toBeInTheDocument();
+    
+    await userEvent.click(screen.getByRole("button"));
+    await userEvent.click(screen.getByText("One"));
+    
+    expect(handleChange).toHaveBeenCalled();
+  });
+});
diff --git a/src/vertex/components/ui/select.test.tsx b/src/vertex/components/ui/select.test.tsx
new file mode 100644
index 0000000000..4451d4c561
--- /dev/null
+++ b/src/vertex/components/ui/select.test.tsx
@@ -0,0 +1,46 @@
+import { render, screen, within } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+import { setupPointerEventMock } from "@/test/utils/domMocks";
+
+setupPointerEventMock();
+
+describe("Select", () => {
+
+  it("renders and selects options", async () => {
+    const handleValueChange = vi.fn();
+    
+    render(
+      <Select onValueChange={handleValueChange}>
+        <SelectTrigger aria-label="Food">
+          <SelectValue placeholder="Select food" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectContent>
+      </Select>
+    );
+
+    const trigger = screen.getByRole("combobox", { name: "Food" });
+    expect(trigger).toBeInTheDocument();
+
+    await userEvent.click(trigger);
+    
+    const listbox = await screen.findByRole("listbox");
+    expect(listbox).toBeInTheDocument();
+
+    const appleOption = within(listbox).getByRole("option", { name: "Apple" });
+    await userEvent.click(appleOption);
+
+    expect(handleValueChange).toHaveBeenCalledWith("apple");
+  });
+});
diff --git a/src/vertex/components/ui/separator.test.tsx b/src/vertex/components/ui/separator.test.tsx
new file mode 100644
index 0000000000..2a294e3deb
--- /dev/null
+++ b/src/vertex/components/ui/separator.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Separator } from "./separator";
+
+describe("Separator", () => {
+  it("renders properly", () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toHaveClass("bg-border");
+  });
+});
diff --git a/src/vertex/components/ui/sheet.test.tsx b/src/vertex/components/ui/sheet.test.tsx
new file mode 100644
index 0000000000..8fdfdfc72c
--- /dev/null
+++ b/src/vertex/components/ui/sheet.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Sheet, SheetTrigger, SheetContent, SheetTitle, SheetDescription } from "./sheet";
+
+describe("Sheet", () => {
+  it("opens the sheet", async () => {
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetTitle>Sheet Title</SheetTitle>
+          <SheetDescription>Sheet Desc</SheetDescription>
+        </SheetContent>
+      </Sheet>
+    );
+
+    expect(screen.queryByText("Sheet Title")).not.toBeInTheDocument();
+    await userEvent.click(screen.getByText("Open Sheet"));
+    expect(await screen.findByText("Sheet Title")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/skeleton.test.tsx b/src/vertex/components/ui/skeleton.test.tsx
new file mode 100644
index 0000000000..fa72264ed2
--- /dev/null
+++ b/src/vertex/components/ui/skeleton.test.tsx
@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Skeleton } from "./skeleton";
+
+describe("Skeleton", () => {
+  it("renders correctly", () => {
+    const { container } = render(<Skeleton className="w-[100px] h-[20px]" />);
+    
+    const element = container.firstChild as HTMLElement;
+    expect(element).toBeInTheDocument();
+    expect(element.className).toContain("animate-pulse");
+    expect(element.className).toContain("w-[100px]");
+    expect(element.className).toContain("h-[20px]");
+  });
+});
diff --git a/src/vertex/components/ui/sonner.test.tsx b/src/vertex/components/ui/sonner.test.tsx
new file mode 100644
index 0000000000..862ff59a2f
--- /dev/null
+++ b/src/vertex/components/ui/sonner.test.tsx
@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Toaster } from "./sonner";
+
+vi.mock("next-themes", () => ({
+  useTheme: () => ({ theme: "light" })
+}));
+
+describe("Sonner Toaster", () => {
+  it("renders without crashing", () => {
+    const { container } = render(<Toaster />);
+    expect(container).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/stepper.test.tsx b/src/vertex/components/ui/stepper.test.tsx
new file mode 100644
index 0000000000..2c853ee413
--- /dev/null
+++ b/src/vertex/components/ui/stepper.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Stepper, Step } from "./stepper";
+
+describe("Stepper", () => {
+  it("renders steps based on index", () => {
+    render(
+      <Stepper index={1}>
+        <Step>
+          <span>Step 1</span>
+          <span>Desc 1</span>
+        </Step>
+        <Step>
+          <span>Step 2</span>
+        </Step>
+      </Stepper>
+    );
+
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+    expect(screen.getByText("Desc 1")).toBeInTheDocument();
+    expect(screen.getByText("Step 2")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/switch.test.tsx b/src/vertex/components/ui/switch.test.tsx
new file mode 100644
index 0000000000..fce4ce1a62
--- /dev/null
+++ b/src/vertex/components/ui/switch.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Switch } from "./switch";
+
+describe("Switch", () => {
+  it("toggles state", async () => {
+    const handleChange = vi.fn();
+    render(<Switch onCheckedChange={handleChange} aria-label="Toggle feature" />);
+    
+    const switchElement = screen.getByRole("switch", { name: "Toggle feature" });
+    expect(switchElement).toHaveAttribute("aria-checked", "false");
+    
+    await userEvent.click(switchElement);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/vertex/components/ui/table.test.tsx b/src/vertex/components/ui/table.test.tsx
new file mode 100644
index 0000000000..a7ec851e29
--- /dev/null
+++ b/src/vertex/components/ui/table.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./table";
+
+describe("Table", () => {
+  it("renders table structure", () => {
+    render(
+      <Table>
+        <TableCaption>A test table</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Header</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell Data</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Footer Data</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+    );
+
+    expect(screen.getByText("A test table")).toBeInTheDocument();
+    expect(screen.getByText("Header")).toBeInTheDocument();
+    expect(screen.getByText("Cell Data")).toBeInTheDocument();
+    expect(screen.getByText("Footer Data")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/tabs.test.tsx b/src/vertex/components/ui/tabs.test.tsx
new file mode 100644
index 0000000000..f992e91867
--- /dev/null
+++ b/src/vertex/components/ui/tabs.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+describe("Tabs", () => {
+  it("switches between tabs", async () => {
+    render(
+      <Tabs defaultValue="tab1">
+        <TabsList>
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content 1</TabsContent>
+        <TabsContent value="tab2">Content 2</TabsContent>
+      </Tabs>
+    );
+
+    expect(screen.getByText("Content 1")).toBeInTheDocument();
+    expect(screen.queryByText("Content 2")).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByRole("tab", { name: "Tab 2" }));
+
+    expect(screen.queryByText("Content 1")).not.toBeInTheDocument();
+    expect(screen.getByText("Content 2")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/textarea.test.tsx b/src/vertex/components/ui/textarea.test.tsx
new file mode 100644
index 0000000000..957dfaa954
--- /dev/null
+++ b/src/vertex/components/ui/textarea.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Textarea } from "./textarea";
+
+describe("Textarea", () => {
+  it("renders and handles input", async () => {
+    render(<Textarea placeholder="Enter comment" />);
+    
+    const textarea = screen.getByPlaceholderText("Enter comment");
+    expect(textarea).toBeInTheDocument();
+    
+    await userEvent.type(textarea, "Hello world");
+    expect(textarea).toHaveValue("Hello world");
+  });
+});
diff --git a/src/vertex/components/ui/toast.test.tsx b/src/vertex/components/ui/toast.test.tsx
new file mode 100644
index 0000000000..671d0c3a50
--- /dev/null
+++ b/src/vertex/components/ui/toast.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from "./toast";
+
+describe("Toast", () => {
+  it("renders toast components", () => {
+    render(
+      <ToastProvider>
+        <Toast open={true}>
+          <ToastTitle>Toast Title</ToastTitle>
+          <ToastDescription>Toast Desc</ToastDescription>
+          <ToastClose />
+        </Toast>
+        <ToastViewport />
+      </ToastProvider>
+    );
+
+    expect(screen.getByText("Toast Title")).toBeInTheDocument();
+    expect(screen.getByText("Toast Desc")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/toaster.test.tsx b/src/vertex/components/ui/toaster.test.tsx
new file mode 100644
index 0000000000..2e2cfef863
--- /dev/null
+++ b/src/vertex/components/ui/toaster.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { Toaster } from "./toaster";
+
+vi.mock("@/hooks/use-toast", () => ({
+  useToast: () => ({
+    toasts: [
+      { id: "1", title: "Test Toast", description: "Test Description" }
+    ]
+  })
+}));
+
+describe("Toaster", () => {
+  it("renders toasts from hook", () => {
+    render(<Toaster />);
+    expect(screen.getByText("Test Toast")).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+  });
+});
diff --git a/src/vertex/components/ui/tooltip.test.tsx b/src/vertex/components/ui/tooltip.test.tsx
new file mode 100644
index 0000000000..f5f34dcdca
--- /dev/null
+++ b/src/vertex/components/ui/tooltip.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
+describe("Tooltip", () => {
+  it("shows tooltip on hover", async () => {
+    render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger>Hover me</TooltipTrigger>
+          <TooltipContent>Tooltip text</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+
+    expect(screen.queryByText("Tooltip text")).not.toBeInTheDocument();
+    
+    await userEvent.hover(screen.getByText("Hover me"));
+    
+    const tooltips = await screen.findAllByText("Tooltip text");
+    expect(tooltips.length).toBeGreaterThan(0);
+  });
+});
diff --git a/src/vertex/core/config/proxyConfig.test.ts b/src/vertex/core/config/proxyConfig.test.ts
new file mode 100644
index 0000000000..991c13c721
--- /dev/null
+++ b/src/vertex/core/config/proxyConfig.test.ts
@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  getEndpointConfig,
+  getAuthOptions,
+  validateProxyConfig,
+  AUTH_TYPES,
+  DEFAULT_ENDPOINT_CONFIG,
+} from "./proxyConfig";
+import logger from "@/lib/logger";
+
+vi.mock("@/lib/logger", () => ({
+  default: {
+    error: vi.fn(),
+  },
+}));
+
+describe("proxyConfig", () => {
+  describe("getEndpointConfig", () => {
+    const endpointCases = [
+      { name: "known endpoint (users)", endpoint: "users", expectedAuth: true, expectedToken: false },
+      { name: "known endpoint (data)", endpoint: "data", expectedAuth: false, expectedToken: true },
+      { name: "known endpoint mixed (user-devices)", endpoint: "user-devices", expectedAuth: true, expectedToken: true },
+      { name: "known endpoint public (health)", endpoint: "health", expectedAuth: false, expectedToken: false },
+      { name: "unknown endpoint", endpoint: "unknown", expectedAuth: DEFAULT_ENDPOINT_CONFIG.requiresAuth, expectedToken: DEFAULT_ENDPOINT_CONFIG.requiresApiToken },
+      { name: "case insensitive", endpoint: "USERS", expectedAuth: true, expectedToken: false },
+    ];
+
+    it.each(endpointCases)("returns correct config for $name", ({ endpoint, expectedAuth, expectedToken }) => {
+      const config = getEndpointConfig(endpoint);
+      expect(config.requiresAuth).toBe(expectedAuth);
+      expect(config.requiresApiToken).toBe(expectedToken);
+    });
+  });
+
+  describe("getAuthOptions", () => {
+    const authCases = [
+      { name: "explicit NONE", path: ["users"], header: AUTH_TYPES.NONE, expectedAuth: false, expectedToken: false },
+      { name: "explicit JWT", path: ["data"], header: AUTH_TYPES.JWT, expectedAuth: true, expectedToken: false },
+      { name: "explicit API_TOKEN", path: ["users"], header: AUTH_TYPES.API_TOKEN, expectedAuth: false, expectedToken: true },
+      { name: "explicit AUTO fallback to endpoint", path: ["users"], header: AUTH_TYPES.AUTO, expectedAuth: true, expectedToken: false },
+      { name: "no header fallback to endpoint (array path)", path: ["data", "123"], header: undefined, expectedAuth: false, expectedToken: true },
+      { name: "no header fallback to endpoint (string path)", path: "measurements/recent", header: undefined, expectedAuth: false, expectedToken: true },
+      { name: "unknown endpoint fallback", path: ["unknown"], header: undefined, expectedAuth: DEFAULT_ENDPOINT_CONFIG.requiresAuth, expectedToken: DEFAULT_ENDPOINT_CONFIG.requiresApiToken },
+      { name: "empty path fallback", path: [], header: undefined, expectedAuth: DEFAULT_ENDPOINT_CONFIG.requiresAuth, expectedToken: DEFAULT_ENDPOINT_CONFIG.requiresApiToken },
+      { name: "empty string path fallback", path: "", header: undefined, expectedAuth: DEFAULT_ENDPOINT_CONFIG.requiresAuth, expectedToken: DEFAULT_ENDPOINT_CONFIG.requiresApiToken },
+    ];
+
+    it.each(authCases)("resolves auth for $name", ({ path, header, expectedAuth, expectedToken }) => {
+      const config = getAuthOptions(path, header);
+      expect(config.requiresAuth).toBe(expectedAuth);
+      expect(config.requiresApiToken).toBe(expectedToken);
+    });
+  });
+
+  describe("validateProxyConfig", () => {
+    let originalEnv: NodeJS.ProcessEnv;
+
+    beforeEach(() => {
+      originalEnv = process.env;
+      process.env = { ...originalEnv };
+      vi.clearAllMocks();
+    });
+
+    afterEach(() => {
+      process.env = originalEnv;
+    });
+
+    it("returns false and logs error if NEXT_PUBLIC_API_URL is missing", () => {
+      delete process.env.NEXT_PUBLIC_API_URL;
+      process.env.NEXT_PUBLIC_API_TOKEN = "token";
+      expect(validateProxyConfig()).toBe(false);
+      expect(logger.error).toHaveBeenCalledWith("NEXT_PUBLIC_API_URL is not set in environment variables");
+    });
+
+    it("returns false and logs error if NEXT_PUBLIC_API_URL is invalid", () => {
+      process.env.NEXT_PUBLIC_API_URL = "not-a-url";
+      process.env.NEXT_PUBLIC_API_TOKEN = "token";
+      expect(validateProxyConfig()).toBe(false);
+      expect(logger.error).toHaveBeenCalledWith("NEXT_PUBLIC_API_URL is not a valid URL", { url: "not-a-url" });
+    });
+
+    it("returns false and logs error if NEXT_PUBLIC_API_TOKEN is missing", () => {
+      process.env.NEXT_PUBLIC_API_URL = "https://api.airqo.net";
+      delete process.env.NEXT_PUBLIC_API_TOKEN;
+      expect(validateProxyConfig()).toBe(false);
+      expect(logger.error).toHaveBeenCalledWith("Missing required environment variables for proxy:", { missing: ["NEXT_PUBLIC_API_TOKEN"] });
+    });
+
+    it("returns true when configuration is valid", () => {
+      process.env.NEXT_PUBLIC_API_URL = "https://api.airqo.net";
+      process.env.NEXT_PUBLIC_API_TOKEN = "valid-token";
+      expect(validateProxyConfig()).toBe(true);
+      expect(logger.error).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/vertex/core/config/vertex-config.test.ts b/src/vertex/core/config/vertex-config.test.ts
new file mode 100644
index 0000000000..85be52893c
--- /dev/null
+++ b/src/vertex/core/config/vertex-config.test.ts
@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { validateVertexConfig, defaultVertexConfig, VertexConfigInput } from "./vertex-config";
+
+describe("vertex-config", () => {
+  describe("validateVertexConfig", () => {
+    it("validates the default configuration successfully", () => {
+      expect(() => validateVertexConfig(defaultVertexConfig)).not.toThrow();
+      const result = validateVertexConfig(defaultVertexConfig);
+      expect(result.org.name).toBe("Vertex Demo");
+    });
+
+    const validationCases = [
+      {
+        name: "fails on missing org name",
+        modifier: (config: VertexConfigInput) => { config.org.name = ""; },
+        expectedError: /org.name: Organization name is required/,
+      },
+      {
+        name: "fails on invalid org slug",
+        modifier: (config: VertexConfigInput) => { config.org.slug = "Invalid_Slug!"; },
+        expectedError: /org.slug: Organization slug must use lowercase letters, numbers, and hyphens/,
+      },
+      {
+        name: "fails on invalid hex color",
+        modifier: (config: VertexConfigInput) => { config.org.primaryColor = "red"; },
+        expectedError: /org.primaryColor: Primary color must be a valid hex color/,
+      },
+      {
+        name: "fails on invalid support email",
+        modifier: (config: VertexConfigInput) => { config.org.supportEmail = "not-an-email"; },
+        expectedError: /org.supportEmail: Support email must be valid/,
+      },
+      {
+        name: "fails when airqo adapter is used without baseUrl",
+        modifier: (config: VertexConfigInput) => { 
+          config.api.adapter = "airqo";
+          config.api.baseUrl = "";
+        },
+        expectedError: /api.baseUrl: api.baseUrl is required when api.adapter is airqo/,
+      },
+      {
+        name: "fails when airqo auth is used without airqo adapter",
+        modifier: (config: VertexConfigInput) => { 
+          config.auth.provider = "airqo";
+          config.api.adapter = "mock";
+        },
+        expectedError: /auth.provider: auth.provider airqo requires api.adapter airqo/,
+      },
+      {
+        name: "succeeds with airqo adapter and auth when baseUrl is provided",
+        modifier: (config: VertexConfigInput) => { 
+          config.api.adapter = "airqo";
+          config.api.baseUrl = "https://api.airqo.net";
+          config.auth.provider = "airqo";
+        },
+        expectedError: null,
+      },
+      {
+        name: "fails on invalid map latitude",
+        modifier: (config: VertexConfigInput) => { config.map.defaultCenter = [100, 0]; },
+        expectedError: /map.defaultCenter: Map latitude must be between -90 and 90/,
+      },
+      {
+        name: "fails on invalid map zoom",
+        modifier: (config: VertexConfigInput) => { config.map.defaultZoom = 25; },
+        expectedError: /map.defaultZoom: Number must be less than or equal to 22/,
+      },
+    ];
+
+    it.each(validationCases)("validation: $name", ({ modifier, expectedError }) => {
+      // Deep clone default config
+      const testConfig: VertexConfigInput = JSON.parse(JSON.stringify(defaultVertexConfig));
+      modifier(testConfig);
+
+      if (expectedError) {
+        expect(() => validateVertexConfig(testConfig)).toThrow(expectedError);
+      } else {
+        expect(() => validateVertexConfig(testConfig)).not.toThrow();
+      }
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useBannerWithDelay.test.tsx b/src/vertex/core/hooks/useBannerWithDelay.test.tsx
new file mode 100644
index 0000000000..523def647d
--- /dev/null
+++ b/src/vertex/core/hooks/useBannerWithDelay.test.tsx
@@ -0,0 +1,56 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { useBannerWithDelay } from "./useBannerWithDelay";
+import { useBanner } from "@/context/banner-context";
+import { AFTER_DIALOG_CLOSE_MS } from "@/core/constants/ui";
+
+vi.mock("@/context/banner-context", () => ({
+  useBanner: vi.fn(),
+}));
+
+describe("useBannerWithDelay", () => {
+  let showBannerMock: any;
+
+  beforeEach(() => {
+    showBannerMock = vi.fn();
+    (useBanner as any).mockReturnValue({ showBanner: showBannerMock });
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it("calls showBanner after delay", () => {
+    const { result } = renderHook(() => useBannerWithDelay());
+    
+    act(() => {
+      result.current.showBannerWithDelay({ message: "Test", severity: "success" });
+    });
+
+    expect(showBannerMock).not.toHaveBeenCalled();
+    
+    act(() => {
+      vi.advanceTimersByTime(AFTER_DIALOG_CLOSE_MS);
+    });
+
+    expect(showBannerMock).toHaveBeenCalledWith({ message: "Test", severity: "success" });
+  });
+
+  it("clears previous timer on multiple calls", () => {
+    const { result } = renderHook(() => useBannerWithDelay());
+    
+    act(() => {
+      result.current.showBannerWithDelay({ message: "First", severity: "info" });
+      result.current.showBannerWithDelay({ message: "Second", severity: "info" });
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(AFTER_DIALOG_CLOSE_MS);
+    });
+
+    expect(showBannerMock).toHaveBeenCalledTimes(1);
+    expect(showBannerMock).toHaveBeenCalledWith({ message: "Second", severity: "info" });
+  });
+});
diff --git a/src/vertex/core/hooks/useClipboard.test.tsx b/src/vertex/core/hooks/useClipboard.test.tsx
new file mode 100644
index 0000000000..21a188152e
--- /dev/null
+++ b/src/vertex/core/hooks/useClipboard.test.tsx
@@ -0,0 +1,55 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useClipboard } from "./useClipboard";
+import { useBanner } from "@/context/banner-context";
+import { toast } from "@/components/shared/toast/ReusableToast";
+
+vi.mock("@/context/banner-context", () => ({
+  useBanner: vi.fn(),
+}));
+
+vi.mock("@/components/shared/toast/ReusableToast", () => ({
+  toast: { success: vi.fn() },
+}));
+
+describe("useClipboard", () => {
+  let showBannerMock: any;
+
+  beforeEach(() => {
+    showBannerMock = vi.fn();
+    (useBanner as any).mockReturnValue({ showBanner: showBannerMock });
+    Object.assign(navigator, {
+      clipboard: { writeText: vi.fn() },
+    });
+    vi.clearAllMocks();
+  });
+
+  it("copies text and shows success toast", async () => {
+    (navigator.clipboard.writeText as any).mockResolvedValue(undefined);
+    const { result } = renderHook(() => useClipboard());
+
+    await act(async () => {
+      await result.current.handleCopy("test text");
+    });
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith("test text");
+    expect(toast.success).toHaveBeenCalledWith("Copied");
+    expect(showBannerMock).not.toHaveBeenCalled();
+  });
+
+  it("shows error banner if copy fails", async () => {
+    (navigator.clipboard.writeText as any).mockRejectedValue(new Error("fail"));
+    const { result } = renderHook(() => useClipboard());
+
+    await act(async () => {
+      await result.current.handleCopy("test text");
+    });
+
+    expect(showBannerMock).toHaveBeenCalledWith({
+      severity: "error",
+      message: "Failed to copy",
+      scoped: false,
+    });
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/vertex/core/hooks/useCohorts.test.tsx b/src/vertex/core/hooks/useCohorts.test.tsx
new file mode 100644
index 0000000000..5e68d4583f
--- /dev/null
+++ b/src/vertex/core/hooks/useCohorts.test.tsx
@@ -0,0 +1,50 @@
+import { waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useCohorts, useGroupCohorts } from "./useCohorts";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { cohorts as cohortsApi } from "../apis/cohorts";
+
+vi.mock("../apis/cohorts", () => ({
+  cohorts: {
+    getCohortsSummary: vi.fn(),
+    getGroupCohorts: vi.fn(),
+  },
+}));
+
+describe("useCohorts", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useCohorts", () => {
+    it("fetches cohorts summary", async () => {
+      const mockCohorts = [{ _id: "c1", name: "Cohort 1" }];
+      (cohortsApi.getCohortsSummary as any).mockResolvedValue({ cohorts: mockCohorts });
+
+      const { result } = renderHookWithProviders(() => useCohorts());
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(cohortsApi.getCohortsSummary).toHaveBeenCalled();
+      expect(result.current.cohorts).toEqual(mockCohorts);
+    });
+  });
+
+  describe("useGroupCohorts", () => {
+    it("fetches group cohorts", async () => {
+      const mockIds = ["c1", "c2"];
+      (cohortsApi.getGroupCohorts as any).mockResolvedValue({ data: mockIds });
+
+      const { result } = renderHookWithProviders(() => useGroupCohorts("group-1"));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(cohortsApi.getGroupCohorts).toHaveBeenCalledWith("group-1");
+      expect(result.current.data).toEqual(mockIds);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useContextAwareRouting.test.ts b/src/vertex/core/hooks/useContextAwareRouting.test.ts
new file mode 100644
index 0000000000..dc9fbabc2d
--- /dev/null
+++ b/src/vertex/core/hooks/useContextAwareRouting.test.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { isRouteAccessible } from "./useContextAwareRouting";
+import { ROUTE_LINKS } from "@/core/routes";
+import { SidebarConfig } from "./useUserContext";
+
+describe("useContextAwareRouting helpers", () => {
+  describe("isRouteAccessible", () => {
+    const mockConfig: SidebarConfig = {
+      title: 'Mock Title',
+      showNetworkMap: true,
+      showMyDevices: false,
+      showDeviceOverview: true,
+      showSites: false,
+      showGrids: true,
+      showCohorts: false,
+      showUserManagement: true,
+      showAccessControl: false,
+      showClaimDevice: true,
+      showDeployDevice: true,
+      showNetworks: false,
+      showShipping: false,
+    };
+
+    const routingCases = [
+      { name: "home is always accessible", route: ROUTE_LINKS.HOME, expected: true },
+      { name: "accessible explicitly (device overview)", route: ROUTE_LINKS.ORG_ASSETS, expected: true },
+      { name: "inaccessible explicitly (sites)", route: ROUTE_LINKS.SITES, expected: false },
+      { name: "accessible explicitly via user management string", route: "/user-management", expected: true },
+      { name: "inaccessible explicitly via access control string", route: "/access-control", expected: false },
+      { name: "accessible base path match", route: "/user-management/123/edit", expected: true },
+      { name: "inaccessible base path match", route: "/access-control/roles/1", expected: false },
+      { name: "inaccessible nested base path match", route: ROUTE_LINKS.ADMIN_NETWORKS + "/requests/42", expected: false },
+      { name: "defaults to true for unknown paths", route: "/unknown-path", expected: true },
+    ];
+
+    it.each(routingCases)("evaluates accessibility for $name", ({ route, expected }) => {
+      expect(isRouteAccessible(route, mockConfig)).toBe(expected);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useContextAwareRouting.ts b/src/vertex/core/hooks/useContextAwareRouting.ts
index 33ced6c4f9..749bdd3fa9 100644
--- a/src/vertex/core/hooks/useContextAwareRouting.ts
+++ b/src/vertex/core/hooks/useContextAwareRouting.ts
@@ -18,6 +18,20 @@ const routeToSidebarConfig: Record<string, keyof SidebarConfig> = {
   [ROUTE_LINKS.ADMIN_SHIPPING]: 'showShipping',
 };
 
+export const isRouteAccessible = (route: string, sidebarConfig: SidebarConfig): boolean => {
+  if (route === ROUTE_LINKS.HOME) return true;
+
+  const matchedRoute = Object.keys(routeToSidebarConfig)
+    .sort((a, b) => b.length - a.length)
+    .find((candidate) => route === candidate || route.startsWith(`${candidate}/`));
+
+  if (matchedRoute) {
+    return sidebarConfig[routeToSidebarConfig[matchedRoute]] === true;
+  }
+
+  return true;
+};
+
 export const useContextAwareRouting = () => {
   const router = useRouter();
   const pathname = usePathname();
@@ -33,29 +47,11 @@ export const useContextAwareRouting = () => {
 
     const sidebarConfig = getSidebarConfig();
 
-    const isRouteAccessible = (route: string): boolean => {
-      if (route === ROUTE_LINKS.HOME) return true;
-      
-      const configKey = routeToSidebarConfig[route];
-      if (configKey) {
-        return sidebarConfig[configKey] === true;
-      }
-      
-      const basePath = route.split('/')[1];
-      const baseRoute = `/${basePath}`;
-      const baseConfigKey = routeToSidebarConfig[baseRoute];
-      if (baseConfigKey) {
-        return sidebarConfig[baseConfigKey] === true;
-      }
-      
-      return true;
-    };
-
     initializedRef.current = true;
     previousContextRef.current = userContext;
 
     // Enforce access on every pathname or context change
-    if (!isRouteAccessible(pathname)) {
+    if (!isRouteAccessible(pathname, sidebarConfig)) {
       router.replace(ROUTE_LINKS.HOME);
       return;
     }
diff --git a/src/vertex/core/hooks/useDevices.test.tsx b/src/vertex/core/hooks/useDevices.test.tsx
new file mode 100644
index 0000000000..c64a052bd3
--- /dev/null
+++ b/src/vertex/core/hooks/useDevices.test.tsx
@@ -0,0 +1,77 @@
+import { waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useDevices, useDeviceDetails } from "./useDevices";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { adapter } from "../adapters";
+
+vi.mock("../adapters", () => ({
+  adapter: {
+    getDevices: vi.fn(),
+    getDevicesByCohorts: vi.fn(),
+    getDevice: vi.fn(),
+  },
+}));
+
+vi.mock("./useCohorts", () => ({
+  useGroupCohorts: vi.fn(() => ({ data: ["cohort-1"], isLoading: false })),
+  usePersonalUserCohorts: vi.fn(() => ({ data: ["cohort-1"], isLoading: false })),
+}));
+
+describe("useDevices", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useDevices", () => {
+    it("fetches devices for airqo group", async () => {
+      const mockDevices = [{ _id: "d1", name: "Device 1" }];
+      (adapter.getDevices as any).mockResolvedValue({ devices: mockDevices });
+
+      const { result } = renderHookWithProviders(() => useDevices(), {
+        preloadedState: { user: { activeGroup: { grp_title: "airqo" } } },
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getDevices).toHaveBeenCalled();
+      expect(result.current.devices).toEqual(mockDevices);
+    });
+
+    it("fetches devices by cohorts for non-airqo group", async () => {
+      const mockDevices = [{ _id: "d2", name: "Device 2" }];
+      (adapter.getDevicesByCohorts as any).mockResolvedValue({ devices: mockDevices });
+
+      const { result } = renderHookWithProviders(() => useDevices(), {
+        preloadedState: { user: { activeGroup: { _id: "org-1", grp_title: "Other Org" } } },
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getDevicesByCohorts).toHaveBeenCalledWith(
+        expect.objectContaining({ cohort_ids: ["cohort-1"] }),
+        expect.any(AbortSignal)
+      );
+      expect(result.current.devices).toEqual(mockDevices);
+    });
+  });
+
+  describe("useDeviceDetails", () => {
+    it("fetches device details", async () => {
+      const mockDevice = { _id: "d1", name: "Device 1" };
+      (adapter.getDevice as any).mockResolvedValue(mockDevice);
+
+      const { result } = renderHookWithProviders(() => useDeviceDetails("d1"));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getDevice).toHaveBeenCalledWith("d1");
+      expect(result.current.data).toEqual(mockDevice);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useGroups.test.tsx b/src/vertex/core/hooks/useGroups.test.tsx
new file mode 100644
index 0000000000..597541c979
--- /dev/null
+++ b/src/vertex/core/hooks/useGroups.test.tsx
@@ -0,0 +1,65 @@
+import { waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useGroups, useGroupsByCohort, useGroupDetails } from "./useGroups";
+import { groupsApi } from "../apis/organizations";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+
+vi.mock("../apis/organizations", () => ({
+  groupsApi: {
+    getGroupsApi: vi.fn(),
+    getGroupsByCohortApi: vi.fn(),
+    getGroupDetailsApi: vi.fn(),
+  },
+}));
+
+describe("useGroups", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useGroups", () => {
+    it("fetches and returns groups", async () => {
+      const mockGroups = [{ _id: "g1", grp_title: "Group 1" }];
+      (groupsApi.getGroupsApi as any).mockResolvedValue({ groups: mockGroups });
+
+      const { result } = renderHookWithProviders(() => useGroups());
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(result.current.groups).toEqual(mockGroups);
+      expect(result.current.error).toBeNull();
+    });
+
+    it("handles errors", async () => {
+      const error = new Error("Failed to fetch");
+      (groupsApi.getGroupsApi as any).mockRejectedValue(error);
+
+      const { result } = renderHookWithProviders(() => useGroups());
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(result.current.error).toBe(error);
+      expect(result.current.groups).toEqual([]);
+    });
+  });
+
+  describe("useGroupsByCohort", () => {
+    it("fetches groups for a cohort", async () => {
+      const mockGroups = [{ _id: "g2", grp_title: "Cohort Group" }];
+      (groupsApi.getGroupsByCohortApi as any).mockResolvedValue({ groups: mockGroups });
+
+      const { result } = renderHookWithProviders(() => useGroupsByCohort("cohort-1"));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(groupsApi.getGroupsByCohortApi).toHaveBeenCalledWith("cohort-1");
+      expect(result.current.groups).toEqual(mockGroups);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/usePermissions.test.tsx b/src/vertex/core/hooks/usePermissions.test.tsx
new file mode 100644
index 0000000000..53b0676dc3
--- /dev/null
+++ b/src/vertex/core/hooks/usePermissions.test.tsx
@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { usePermission, useHasAnyPermission } from "./usePermissions";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { permissionService } from "@/core/permissions/permissionService";
+import { PERMISSIONS } from "@/core/permissions/constants";
+import { createMockUser } from "../../test/factories/userFactory";
+
+vi.mock("@/core/permissions/permissionService", () => ({
+  permissionService: {
+    hasPermission: vi.fn(),
+    checkPermission: vi.fn(),
+    getEffectivePermissions: vi.fn(),
+    getUserRole: vi.fn(),
+    getUserRoles: vi.fn(),
+    isSuperAdmin: vi.fn(),
+    canPerformAction: vi.fn(),
+    canManageOrganization: vi.fn(),
+    canViewOrganization: vi.fn(),
+    getPermissionDescription: vi.fn(),
+  },
+}));
+
+describe("usePermissions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("usePermission", () => {
+    it("returns false if user is not authenticated", () => {
+      const { result } = renderHookWithProviders(() => usePermission(PERMISSIONS.DEVICE.VIEW), {
+        preloadedState: { user: { userDetails: null } },
+      });
+      expect(result.current).toBe(false);
+      expect(permissionService.hasPermission).not.toHaveBeenCalled();
+    });
+
+    it("calls permissionService with correct user and returns true", () => {
+      (permissionService.hasPermission as any).mockReturnValue(true);
+      const mockUser = createMockUser();
+      
+      const { result } = renderHookWithProviders(() => usePermission(PERMISSIONS.DEVICE.VIEW), {
+        preloadedState: { 
+          user: { 
+            userDetails: mockUser,
+            activeGroup: { _id: "org-1" },
+            activeNetwork: { _id: "net-1" },
+          } 
+        },
+      });
+
+      expect(result.current).toBe(true);
+      expect(permissionService.hasPermission).toHaveBeenCalledWith(
+        mockUser, 
+        PERMISSIONS.DEVICE.VIEW, 
+        expect.objectContaining({
+          activeOrganization: { _id: "org-1" },
+          activeNetwork: { _id: "net-1" }
+        })
+      );
+    });
+  });
+
+  describe("useHasAnyPermission", () => {
+    it("returns true if at least one permission matches", () => {
+      (permissionService.hasPermission as any).mockImplementation((user: any, perm: string) => {
+        return perm === PERMISSIONS.SITE.VIEW;
+      });
+
+      const { result } = renderHookWithProviders(() => 
+        useHasAnyPermission([PERMISSIONS.DEVICE.VIEW, PERMISSIONS.SITE.VIEW]), 
+      { preloadedState: { user: { userDetails: createMockUser() } } });
+
+      expect(result.current).toBe(true);
+    });
+
+    it("returns false if none match", () => {
+      (permissionService.hasPermission as any).mockReturnValue(false);
+
+      const { result } = renderHookWithProviders(() => 
+        useHasAnyPermission([PERMISSIONS.DEVICE.VIEW, PERMISSIONS.SITE.VIEW]), 
+      { preloadedState: { user: { userDetails: createMockUser() } } });
+
+      expect(result.current).toBe(false);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useRecentlyVisited.test.tsx b/src/vertex/core/hooks/useRecentlyVisited.test.tsx
new file mode 100644
index 0000000000..927aa6933f
--- /dev/null
+++ b/src/vertex/core/hooks/useRecentlyVisited.test.tsx
@@ -0,0 +1,70 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { useRecentlyVisited } from "./useRecentlyVisited";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { usePathname } from "next/navigation";
+import { ROUTE_LINKS } from "@/core/routes";
+import { useBanner } from "@/context/banner-context";
+
+vi.mock("next/navigation", () => ({
+  usePathname: vi.fn(),
+}));
+
+vi.mock("@/context/banner-context", () => ({
+  useBanner: vi.fn(),
+}));
+
+describe("useRecentlyVisited", () => {
+  beforeEach(() => {
+    (useBanner as any).mockReturnValue({ showBanner: vi.fn() });
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("initializes empty if no user is logged in", () => {
+    (usePathname as any).mockReturnValue(ROUTE_LINKS.HOME);
+    
+    const { result } = renderHookWithProviders(() => useRecentlyVisited(), {
+      preloadedState: { user: { userDetails: null } },
+    });
+
+    expect(result.current.visitedPages).toEqual([]);
+  });
+
+  it("adds page to recently visited and saves to localStorage", () => {
+    (usePathname as any).mockReturnValue("/admin/networks");
+    
+    const { result } = renderHookWithProviders(() => useRecentlyVisited(), {
+      preloadedState: { user: { userDetails: { _id: "user-1" } } },
+    });
+
+    expect(result.current.visitedPages).toEqual([
+      { label: "Sensor Manufacturers", href: "/admin/networks" }
+    ]);
+    
+    const stored = localStorage.getItem("vertex_recently_visited_user-1");
+    expect(stored).toContain("Sensor Manufacturers");
+  });
+
+  it("deduplicates identical paths and limits to 4 items", () => {
+    const state = { preloadedState: { user: { userDetails: { _id: "user-1" } } } };
+    
+    // Seed storage with 4 items
+    localStorage.setItem("vertex_recently_visited_user-1", JSON.stringify([
+      { label: "1", href: "/1" },
+      { label: "2", href: "/2" },
+      { label: "3", href: "/3" },
+      { label: "4", href: "/4" },
+    ]));
+
+    (usePathname as any).mockReturnValue("/admin/sites"); // should push out the 4th item
+    
+    const { result } = renderHookWithProviders(() => useRecentlyVisited(), state);
+
+    expect(result.current.visitedPages).toHaveLength(4);
+    expect(result.current.visitedPages[0].label).toBe("Sites");
+    expect(result.current.visitedPages[3].label).toBe("3"); // 4 is pushed out
+  });
+});
diff --git a/src/vertex/core/hooks/useRoles.test.tsx b/src/vertex/core/hooks/useRoles.test.tsx
new file mode 100644
index 0000000000..0802d5c1de
--- /dev/null
+++ b/src/vertex/core/hooks/useRoles.test.tsx
@@ -0,0 +1,49 @@
+import { waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useRoles, useGroupRoles } from "./useRoles";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { adapter } from "../adapters";
+
+vi.mock("../adapters", () => ({
+  adapter: {
+    getRolesApi: vi.fn(),
+    getOrgRolesApi: vi.fn(),
+  },
+}));
+
+describe("useRoles", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useRoles", () => {
+    it("fetches and returns roles", async () => {
+      const mockRoles = [{ _id: "r1", role_name: "Admin" }];
+      (adapter.getRolesApi as any).mockResolvedValue({ roles: mockRoles });
+
+      const { result } = renderHookWithProviders(() => useRoles());
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(result.current.roles).toEqual(mockRoles);
+    });
+  });
+
+  describe("useGroupRoles", () => {
+    it("fetches and returns group roles", async () => {
+      const mockGroupRoles = [{ _id: "gr1", role_name: "Group Admin" }];
+      (adapter.getOrgRolesApi as any).mockResolvedValue({ group_roles: mockGroupRoles });
+
+      const { result } = renderHookWithProviders(() => useGroupRoles("org-1"));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getOrgRolesApi).toHaveBeenCalledWith("org-1");
+      expect(result.current.grproles).toEqual(mockGroupRoles);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useServerSideTableState.test.tsx b/src/vertex/core/hooks/useServerSideTableState.test.tsx
new file mode 100644
index 0000000000..d00b4fa114
--- /dev/null
+++ b/src/vertex/core/hooks/useServerSideTableState.test.tsx
@@ -0,0 +1,53 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useServerSideTableState } from "./useServerSideTableState";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
+
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn(),
+  usePathname: vi.fn(),
+  useSearchParams: vi.fn(),
+}));
+
+describe("useServerSideTableState", () => {
+  let routerReplaceMock: any;
+
+  beforeEach(() => {
+    routerReplaceMock = vi.fn();
+    (useRouter as any).mockReturnValue({ replace: routerReplaceMock });
+    (usePathname as any).mockReturnValue("/admin/devices");
+    (useSearchParams as any).mockReturnValue(new URLSearchParams(""));
+    vi.clearAllMocks();
+  });
+
+  it("initializes with default values", () => {
+    const { result } = renderHook(() => useServerSideTableState({ initialPageSize: 50 }));
+    
+    expect(result.current.pagination).toEqual({ pageIndex: 0, pageSize: 50 });
+    expect(result.current.searchTerm).toBe("");
+    expect(result.current.sorting).toEqual([]);
+  });
+
+  it("initializes from URL params", () => {
+    (useSearchParams as any).mockReturnValue(new URLSearchParams("page=2&limit=10&search=airqo&sortBy=name&order=desc"));
+    
+    const { result } = renderHook(() => useServerSideTableState({}));
+    
+    expect(result.current.pagination).toEqual({ pageIndex: 1, pageSize: 10 });
+    expect(result.current.searchTerm).toBe("airqo");
+    expect(result.current.sorting).toEqual([{ id: "name", desc: true }]);
+  });
+
+  it("updates router on state change", () => {
+    const { result } = renderHook(() => useServerSideTableState({}));
+    
+    act(() => {
+      result.current.setSearchTerm("new search");
+    });
+
+    expect(routerReplaceMock).toHaveBeenCalledWith(
+      "/admin/devices?page=1&limit=25&search=new+search",
+      { scroll: false }
+    );
+  });
+});
diff --git a/src/vertex/core/hooks/useSites.test.tsx b/src/vertex/core/hooks/useSites.test.tsx
new file mode 100644
index 0000000000..fa7a0b49ac
--- /dev/null
+++ b/src/vertex/core/hooks/useSites.test.tsx
@@ -0,0 +1,77 @@
+import { waitFor } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useSites, useSiteDetails } from "./useSites";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import { adapter } from "../adapters";
+
+vi.mock("../adapters", () => ({
+  adapter: {
+    getSites: vi.fn(),
+    getSitesByCohorts: vi.fn(),
+    getSite: vi.fn(),
+  },
+}));
+
+vi.mock("./useCohorts", () => ({
+  useGroupCohorts: vi.fn(() => ({ data: ["cohort-1"], isLoading: false })),
+  usePersonalUserCohorts: vi.fn(() => ({ data: ["cohort-1"], isLoading: false })),
+}));
+
+describe("useSites", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("useSites", () => {
+    it("fetches sites for airqo group without cohorts", async () => {
+      const mockSites = [{ _id: "s1", name: "Site 1" }];
+      (adapter.getSites as any).mockResolvedValue({ sites: mockSites });
+
+      const { result } = renderHookWithProviders(() => useSites(), {
+        preloadedState: { user: { activeGroup: { grp_title: "airqo" } } },
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getSites).toHaveBeenCalled();
+      expect(result.current.sites).toEqual(mockSites);
+    });
+
+    it("fetches sites by cohorts for non-airqo group", async () => {
+      const mockSites = [{ _id: "s2", name: "Site 2" }];
+      (adapter.getSitesByCohorts as any).mockResolvedValue({ sites: mockSites });
+
+      const { result } = renderHookWithProviders(() => useSites(), {
+        preloadedState: { user: { activeGroup: { _id: "org-1", grp_title: "Other Org" } } },
+      });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getSitesByCohorts).toHaveBeenCalledWith(
+        expect.objectContaining({ cohort_ids: ["cohort-1"] }),
+        expect.any(AbortSignal)
+      );
+      expect(result.current.sites).toEqual(mockSites);
+    });
+  });
+
+  describe("useSiteDetails", () => {
+    it("fetches site details", async () => {
+      const mockSite = { _id: "s1", name: "Site 1" };
+      (adapter.getSite as any).mockResolvedValue({ data: mockSite });
+
+      const { result } = renderHookWithProviders(() => useSiteDetails("s1"));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(adapter.getSite).toHaveBeenCalledWith("s1");
+      expect(result.current.data).toEqual(mockSite);
+    });
+  });
+});
diff --git a/src/vertex/core/hooks/useUserContext.test.tsx b/src/vertex/core/hooks/useUserContext.test.tsx
new file mode 100644
index 0000000000..07b3e6397a
--- /dev/null
+++ b/src/vertex/core/hooks/useUserContext.test.tsx
@@ -0,0 +1,66 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useUserContext } from "./useUserContext";
+import { renderHookWithProviders } from "../../test/utils/renderHookWithProviders";
+import * as usePermissionsModule from "./usePermissions";
+import { createMockUser } from "../../test/factories/userFactory";
+import { PERMISSIONS } from "@/core/permissions/constants";
+
+vi.mock("./usePermissions", () => ({
+  usePermission: vi.fn(),
+}));
+
+describe("useUserContext", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("calculates loading states correctly when not initialized", () => {
+    const { result } = renderHookWithProviders(() => useUserContext(), {
+      preloadedState: {
+        user: { isInitialized: false, isAuthenticated: false, userDetails: null }
+      }
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isPermissionsLoading).toBe(false);
+  });
+
+  it("identifies personal context and computes scopes", () => {
+    const { result } = renderHookWithProviders(() => useUserContext(), {
+      preloadedState: {
+        user: {
+          isInitialized: true,
+          isAuthenticated: true,
+          userDetails: createMockUser(),
+          userContext: "personal"
+        }
+      }
+    });
+
+    expect(result.current.isPersonalContext).toBe(true);
+    expect(result.current.userScope).toBe("personal");
+    expect(result.current.isPersonalScope).toBe(true);
+  });
+
+  it("provides sidebar config based on permissions in personal context", () => {
+    // Mock view sites = true, view devices = false
+    (usePermissionsModule.usePermission as any).mockImplementation((perm: string) => {
+      return perm === PERMISSIONS.SITE.VIEW; 
+    });
+
+    const { result } = renderHookWithProviders(() => useUserContext(), {
+      preloadedState: {
+        user: {
+          isInitialized: true,
+          isAuthenticated: true,
+          userDetails: createMockUser(),
+          userContext: "personal"
+        }
+      }
+    });
+
+    const sidebar = result.current.getSidebarConfig();
+    expect(sidebar.showSites).toBe(true);
+    expect(sidebar.showDeviceOverview).toBe(false);
+  });
+});
diff --git a/src/vertex/core/hooks/useWindow.test.tsx b/src/vertex/core/hooks/useWindow.test.tsx
new file mode 100644
index 0000000000..c03b1f0842
--- /dev/null
+++ b/src/vertex/core/hooks/useWindow.test.tsx
@@ -0,0 +1,31 @@
+import { renderHook, act } from "@testing-library/react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { useWindowSize } from "./useWindow";
+
+describe("useWindowSize", () => {
+  beforeEach(() => {
+    vi.stubGlobal("innerWidth", 1024);
+    vi.stubGlobal("innerHeight", 768);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("returns initial window dimensions", () => {
+    const { result } = renderHook(() => useWindowSize());
+    expect(result.current).toEqual({ width: 1024, height: 768 });
+  });
+
+  it("updates dimensions on resize", () => {
+    const { result } = renderHook(() => useWindowSize());
+
+    act(() => {
+      vi.stubGlobal("innerWidth", 800);
+      vi.stubGlobal("innerHeight", 600);
+      window.dispatchEvent(new Event("resize"));
+    });
+
+    expect(result.current).toEqual({ width: 800, height: 600 });
+  });
+});
diff --git a/src/vertex/core/services/network-service.test.ts b/src/vertex/core/services/network-service.test.ts
new file mode 100644
index 0000000000..8b248daccc
--- /dev/null
+++ b/src/vertex/core/services/network-service.test.ts
@@ -0,0 +1,115 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { networkService } from "./network-service";
+import axios from "axios";
+import { mockAxiosSuccess, mockAxiosError, mockFetchSuccess, mockFetchError } from "@/test/factories/apiResponseFactory";
+
+vi.mock("axios", async () => {
+  const actual = await vi.importActual("axios") as any;
+  return {
+    ...actual,
+    default: {
+      ...actual.default,
+      get: vi.fn(),
+      put: vi.fn(),
+      isAxiosError: vi.fn().mockReturnValue(true),
+    }
+  };
+});
+vi.mock("@/lib/api-routing", () => ({
+  buildServerApiUrl: vi.fn((path) => `https://api.airqo.net/v2${path}`),
+}));
+
+describe("network-service", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch = vi.fn();
+  });
+
+  describe("getNetworkCreationRequests", () => {
+    it("returns requests on success", async () => {
+      vi.mocked(axios.get).mockResolvedValueOnce(
+        mockAxiosSuccess({ network_creation_requests: [{ _id: "1" }] })
+      );
+
+      const requests = await networkService.getNetworkCreationRequests("test-token", "test-secret");
+      expect(requests).toHaveLength(1);
+      expect(axios.get).toHaveBeenCalledWith(
+        expect.stringContaining("admin_secret=test-secret"),
+        expect.objectContaining({
+          headers: expect.objectContaining({ Authorization: "JWT test-token" })
+        })
+      );
+    });
+
+    it("throws NOT_FOUND on 404", async () => {
+      vi.mocked(axios.get).mockRejectedValueOnce(mockAxiosError(404, "Not found"));
+
+      await expect(
+        networkService.getNetworkCreationRequests("token", "secret")
+      ).rejects.toThrow("NOT_FOUND");
+    });
+  });
+
+  describe("updateNetworkRequestStatus", () => {
+    it("updates status with notes successfully", async () => {
+      vi.mocked(axios.put).mockResolvedValueOnce(mockAxiosSuccess({ success: true }));
+
+      const res = await networkService.updateNetworkRequestStatus("1", "approve", "Looks good", "token", "secret");
+      expect(res.success).toBe(true);
+      expect(axios.put).toHaveBeenCalledWith(
+        expect.stringContaining("/1/approve?admin_secret=secret"),
+        { admin_secret: "secret", reviewer_notes: "Looks good" },
+        expect.any(Object)
+      );
+    });
+
+    it("handles errors correctly", async () => {
+      vi.mocked(axios.put).mockRejectedValueOnce(mockAxiosError(400, "Bad Request", { message: "Invalid action" }));
+
+      const promise = networkService.updateNetworkRequestStatus("1", "approve", "", "token", "secret");
+      await expect(promise).rejects.toThrow("Invalid action");
+      await expect(promise).rejects.toMatchObject({
+        status: 400,
+        data: { message: "Invalid action" },
+      });
+    });
+  });
+
+  describe("submitNetworkRequest", () => {
+    it("submits successfully", async () => {
+      vi.mocked(global.fetch).mockResolvedValueOnce(mockFetchSuccess({ success: true }));
+
+      const data = { network_name: "Test Net", website: "test.com" } as any;
+      const res = await networkService.submitNetworkRequest(data);
+      expect(res.success).toBe(true);
+      
+      expect(global.fetch).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({ method: "POST", body: JSON.stringify(data) })
+      );
+    });
+
+    it("throws on non-ok fetch response", async () => {
+      vi.mocked(global.fetch).mockResolvedValueOnce(mockFetchError(500, { message: "Server error" }));
+
+      const data = { network_name: "Test Net" } as any;
+      
+      const promise = networkService.submitNetworkRequest(data);
+      await expect(promise).rejects.toThrow("Server error");
+      await expect(promise).rejects.toMatchObject({ status: 500 });
+    });
+
+    it("throws on timeout", async () => {
+      // Simulate an AbortError as thrown by AbortController signal
+      const abortError = new Error("The operation was aborted");
+      abortError.name = "AbortError";
+      vi.mocked(global.fetch).mockRejectedValueOnce(abortError);
+
+      const data = { network_name: "Test Net" } as any;
+      
+      const promise = networkService.submitNetworkRequest(data);
+      await expect(promise).rejects.toThrow("Network request timed out");
+      await expect(promise).rejects.toMatchObject({ status: 504 });
+    });
+  });
+});
diff --git a/src/vertex/core/services/onboardingService.test.ts b/src/vertex/core/services/onboardingService.test.ts
new file mode 100644
index 0000000000..fd33eabf23
--- /dev/null
+++ b/src/vertex/core/services/onboardingService.test.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { onboardingService } from "./onboardingService";
+import { secureApiProxy } from "@/core/utils/secureApiProxyClient";
+
+vi.mock("@/core/utils/secureApiProxyClient", () => ({
+  secureApiProxy: {
+    patch: vi.fn()
+  }
+}));
+
+describe("onboardingService", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("updateUserOnboarding calls correctly", async () => {
+    vi.mocked(secureApiProxy.patch).mockResolvedValueOnce({ data: { success: true } });
+
+    const payload = { action: "mark_step_complete" as const, step_id: "step1" };
+    const res = await onboardingService.updateUserOnboarding(payload);
+
+    expect(res.success).toBe(true);
+    expect(secureApiProxy.patch).toHaveBeenCalledWith("/users/onboarding", payload, {
+      headers: { "X-Auth-Type": "JWT" }
+    });
+  });
+
+  it("updateGroupOnboarding calls correctly", async () => {
+    vi.mocked(secureApiProxy.patch).mockResolvedValueOnce({ data: { success: true } });
+
+    const payload = { action: "dismiss_checklist" as const };
+    const res = await onboardingService.updateGroupOnboarding("grp_123", payload);
+
+    expect(res.success).toBe(true);
+    expect(secureApiProxy.patch).toHaveBeenCalledWith("/users/groups/grp_123/onboarding", payload, {
+      headers: { "X-Auth-Type": "JWT" }
+    });
+  });
+});
diff --git a/src/vertex/core/utils/platform.test.ts b/src/vertex/core/utils/platform.test.ts
new file mode 100644
index 0000000000..40b1f545bc
--- /dev/null
+++ b/src/vertex/core/utils/platform.test.ts
@@ -0,0 +1,83 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { getMacArchitecture } from "./platform";
+
+describe("getMacArchitecture", () => {
+  let originalNavigator: any;
+
+  beforeEach(() => {
+    originalNavigator = { ...window.navigator };
+    // @ts-ignore
+    delete window.navigator;
+    window.navigator = { ...originalNavigator } as any;
+  });
+
+  afterEach(() => {
+    window.navigator = originalNavigator;
+    vi.restoreAllMocks();
+  });
+
+  it("returns unknown when running outside browser", async () => {
+    const origWindow = global.window;
+    // @ts-ignore
+    delete (global as any).window;
+
+    try {
+      const arch = await getMacArchitecture();
+      expect(arch).toBe("unknown");
+    } finally {
+      global.window = origWindow;
+    }
+  });
+
+  it("detects arm64 using userAgentData API", async () => {
+    (window.navigator as any).userAgentData = {
+      getHighEntropyValues: vi.fn().mockResolvedValue({ architecture: "arm" }),
+    };
+
+    const arch = await getMacArchitecture();
+    expect(arch).toBe("arm64");
+  });
+
+  it("detects x64 using userAgentData API", async () => {
+    (window.navigator as any).userAgentData = {
+      getHighEntropyValues: vi.fn().mockResolvedValue({ architecture: "x86" }),
+    };
+
+    const arch = await getMacArchitecture();
+    expect(arch).toBe("x64");
+  });
+
+  it("detects arm64 using WebGL Apple renderer fallback", async () => {
+    const mockGetExtension = vi.fn().mockReturnValue({ UNMASKED_RENDERER_WEBGL: "UNMASKED_RENDERER_WEBGL" });
+    const mockGetParameter = vi.fn().mockReturnValue("Apple M1");
+    
+    const mockCanvas = {
+      getContext: vi.fn().mockReturnValue({
+        getExtension: mockGetExtension,
+        getParameter: mockGetParameter,
+      }),
+    };
+    
+    vi.spyOn(document, "createElement").mockReturnValue(mockCanvas as any);
+
+    const arch = await getMacArchitecture();
+    expect(arch).toBe("arm64");
+  });
+
+  it("returns unknown when no detection method matches", async () => {
+    const mockGetExtension = vi.fn().mockReturnValue({ UNMASKED_RENDERER_WEBGL: "UNMASKED_RENDERER_WEBGL" });
+    const mockGetParameter = vi.fn().mockReturnValue("Intel Iris");
+    
+    const mockCanvas = {
+      getContext: vi.fn().mockReturnValue({
+        getExtension: mockGetExtension,
+        getParameter: mockGetParameter,
+      }),
+    };
+    
+    vi.spyOn(document, "createElement").mockReturnValue(mockCanvas as any);
+
+    const arch = await getMacArchitecture();
+    expect(arch).toBe("unknown");
+  });
+});
diff --git a/src/vertex/core/utils/proxyClient.test.ts b/src/vertex/core/utils/proxyClient.test.ts
new file mode 100644
index 0000000000..e84f0fbe9b
--- /dev/null
+++ b/src/vertex/core/utils/proxyClient.test.ts
@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { createProxyHandler } from "./proxyClient";
+import axios from "axios";
+import { NextRequest } from "next/server";
+import { mockGetServerSession, createMockSession, resetNextAuthMocks } from "@/test/mocks/nextAuth";
+import { mockAxiosSuccess, mockAxiosError } from "@/test/factories/apiResponseFactory";
+
+vi.mock("axios", async () => {
+  const actual = await vi.importActual("axios") as any;
+  const mockAxios = vi.fn() as any;
+  Object.assign(mockAxios, actual.default);
+  mockAxios.create = vi.fn().mockReturnValue({
+    interceptors: { request: { use: vi.fn() }, response: { use: vi.fn() } },
+    get: vi.fn(), post: vi.fn(), put: vi.fn(), patch: vi.fn(), delete: vi.fn()
+  });
+  return { 
+    ...actual,
+    default: mockAxios 
+  };
+});
+
+vi.mock("next-auth", async () => {
+  const { mockGetServerSession } = await import("@/test/mocks/nextAuth");
+  return { getServerSession: (...args: any[]) => mockGetServerSession(...args) };
+});
+
+vi.mock("@/lib/envConstants", () => ({
+  getApiToken: vi.fn().mockReturnValue("test-api-token"),
+}));
+vi.mock("@/lib/api-routing", () => ({
+  buildServerApiUrl: vi.fn((path) => `https://api.airqo.net/v2/${path}`),
+}));
+
+describe("proxyClient", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    resetNextAuthMocks();
+  });
+
+  const createRequest = (method = "GET", url = "http://localhost:3000/api/users", body?: any) => {
+    return new NextRequest(url, {
+      method,
+      body: body ? JSON.stringify(body) : undefined,
+      headers: new Headers({
+        "content-type": body ? "application/json" : "text/plain",
+      })
+    });
+  };
+
+  it("returns 405 for unsupported methods", async () => {
+    const handler = createProxyHandler();
+    const req = createRequest("OPTIONS");
+    const res = await handler(req, { params: { path: ["users"] } });
+    
+    expect(res.status).toBe(405);
+  });
+
+  it("forwards GET request successfully", async () => {
+    const handler = createProxyHandler();
+    const req = createRequest("GET", "http://localhost:3000/api/users?status=active");
+    
+    vi.mocked(axios).mockResolvedValueOnce(mockAxiosSuccess({ users: [] }));
+    
+    const res = await handler(req, { params: { path: ["users"] } });
+    
+    expect(axios).toHaveBeenCalledWith(expect.objectContaining({
+      method: "GET",
+      url: "https://api.airqo.net/v2/users",
+      params: { status: "active" },
+    }));
+    
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toEqual({ users: [] });
+  });
+
+  it("handles auth token injection when requiresAuth is true", async () => {
+    const handler = createProxyHandler({ requiresAuth: true });
+    const req = createRequest("GET");
+    
+    mockGetServerSession.mockResolvedValueOnce(createMockSession());
+    vi.mocked(axios).mockResolvedValueOnce(mockAxiosSuccess({}));
+    
+    await handler(req, { params: { path: ["users"] } });
+    
+    expect(axios).toHaveBeenCalledWith(expect.objectContaining({
+      headers: expect.objectContaining({
+        Authorization: "JWT test-access-token",
+      }),
+    }));
+  });
+
+  it("handles API token injection when requiresApiToken is true", async () => {
+    const handler = createProxyHandler({ requiresApiToken: true });
+    const req = createRequest("GET");
+    
+    vi.mocked(axios).mockResolvedValueOnce(mockAxiosSuccess({}));
+    
+    const res = await handler(req, { params: { path: ["users"] } });
+    if (res.status !== 200) {
+      console.log(await res.json());
+    }
+    expect(res.status).toBe(200);
+    
+    expect(axios).toHaveBeenCalledWith(expect.objectContaining({
+      params: expect.objectContaining({
+        token: "test-api-token",
+      }),
+    }));
+  });
+
+  it("forwards POST body", async () => {
+    const handler = createProxyHandler();
+    const req = createRequest("POST", "http://localhost:3000/api/users", { name: "Test" });
+    
+    vi.mocked(axios).mockResolvedValueOnce(mockAxiosSuccess({ id: 1 }));
+    
+    await handler(req, { params: { path: ["users"] } });
+    
+    expect(axios).toHaveBeenCalledWith(expect.objectContaining({
+      method: "POST",
+      data: { name: "Test" },
+    }));
+  });
+
+  it("handles downstream API errors", async () => {
+    const handler = createProxyHandler();
+    const req = createRequest("GET");
+    
+    vi.mocked(axios).mockRejectedValueOnce(mockAxiosError(404, "Not Found"));
+    
+    const res = await handler(req, { params: { path: ["users"] } });
+    
+    expect(res.status).toBe(404);
+    const data = await res.json();
+    expect(data).toEqual({ message: "Not Found" });
+  });
+});
diff --git a/src/vertex/core/utils/secureApiProxyClient.test.ts b/src/vertex/core/utils/secureApiProxyClient.test.ts
new file mode 100644
index 0000000000..d5b3ac993d
--- /dev/null
+++ b/src/vertex/core/utils/secureApiProxyClient.test.ts
@@ -0,0 +1,101 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { clearTokenCache, hasValidToken } from "./secureApiProxyClient";
+import { mockGetSession, createMockSession, resetNextAuthMocks } from "@/test/mocks/nextAuth";
+
+const { interceptors } = vi.hoisted(() => {
+  let reqCb: any, resSuccCb: any, resErrCb: any;
+  return {
+    interceptors: {
+      setRequest: (cb: any) => { reqCb = cb; },
+      setResponse: (succCb: any, errCb: any) => { resSuccCb = succCb; resErrCb = errCb; },
+      getRequest: () => reqCb,
+      getResponseSuccess: () => resSuccCb,
+      getResponseError: () => resErrCb
+    }
+  };
+});
+
+vi.mock("axios", async () => {
+  const actual = await vi.importActual("axios") as any;
+  return {
+    ...actual,
+    default: {
+      ...actual.default,
+      create: vi.fn(() => ({
+        interceptors: {
+          request: { use: interceptors.setRequest },
+          response: { use: interceptors.setResponse }
+        },
+        get: vi.fn(),
+      })),
+      isCancel: vi.fn().mockReturnValue(false)
+    }
+  };
+});
+
+vi.mock("next-auth/react", async () => {
+  const { mockGetSession } = await import("@/test/mocks/nextAuth");
+  return { getSession: (...args: any[]) => mockGetSession(...args) };
+});
+
+vi.mock("@/lib/envConstants", () => ({
+  getApiToken: vi.fn().mockReturnValue("test-api-token"),
+}));
+
+describe("secureApiProxyClient", () => {
+  beforeEach(() => {
+    clearTokenCache();
+    resetNextAuthMocks();
+  });
+
+  it("request interceptor adds JWT token to headers", async () => {
+    mockGetSession.mockResolvedValueOnce(createMockSession());
+    
+    const config = { headers: { set: vi.fn() } as any };
+    const requestHandler = interceptors.getRequest();
+    const updatedConfig = await requestHandler(config);
+
+    expect(updatedConfig.headers.set).toHaveBeenCalledWith("Authorization", "test-access-token");
+  });
+
+  it("request interceptor adds API token to URL", async () => {
+    const config = { url: "/test", headers: { "X-Auth-Type": "API_TOKEN", set: vi.fn() } as any };
+    const requestHandler = interceptors.getRequest();
+    const updatedConfig = await requestHandler(config);
+
+    expect(updatedConfig.url).toContain("token=test-api-token");
+  });
+
+  it("response error interceptor dispatches network degraded event", async () => {
+    const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
+    const error = { code: "ERR_NETWORK", config: { url: "/test", headers: {} }, response: undefined };
+    
+    const responseErrorHandler = interceptors.getResponseError();
+    await expect(responseErrorHandler(error)).rejects.toThrow();
+
+    const degradedEvent = dispatchEventSpy.mock.calls.find(
+      (call) => call[0].type === "vertex-network-degraded"
+    );
+    expect(degradedEvent).toBeDefined();
+  });
+
+  it("response error interceptor clears token on 401", async () => {
+    mockGetSession.mockResolvedValueOnce(createMockSession());
+    expect(await hasValidToken()).toBe(true);
+
+    const error = { response: { status: 401 }, config: { url: "/test", headers: { "x-auth-type": "jwt" } } };
+    
+    const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
+
+    const responseErrorHandler = interceptors.getResponseError();
+    await expect(responseErrorHandler(error)).rejects.toThrow();
+
+    const authEvent = dispatchEventSpy.mock.calls.find(
+      (call) => call[0].type === "auth-token-expired"
+    );
+    expect(authEvent).toBeDefined();
+    
+    mockGetSession.mockResolvedValueOnce(null);
+    expect(await hasValidToken()).toBe(false);
+  });
+});
diff --git a/src/vertex/lib/api-routing.test.ts b/src/vertex/lib/api-routing.test.ts
new file mode 100644
index 0000000000..9fbf22bc20
--- /dev/null
+++ b/src/vertex/lib/api-routing.test.ts
@@ -0,0 +1,95 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import {
+  resolveApiOrigin,
+  resolveVersionedApiPath,
+  buildServerApiUrl,
+  buildBrowserApiUrl,
+} from "./api-routing";
+
+describe("api-routing", () => {
+  let originalEnv: NodeJS.ProcessEnv;
+
+  beforeEach(() => {
+    originalEnv = process.env;
+    process.env = { ...originalEnv };
+  });
+
+  afterEach(() => {
+    process.env = originalEnv;
+    vi.restoreAllMocks();
+  });
+
+  describe("resolveApiOrigin", () => {
+    it("throws error if no API URL environment variables are set", () => {
+      delete process.env.API_BASE_URL;
+      delete process.env.NEXT_PUBLIC_API_BASE_URL;
+      delete process.env.NEXT_PUBLIC_API_URL;
+      delete process.env.NEXT_PUBLIC_BASE_URL;
+      
+      expect(() => resolveApiOrigin()).toThrow(/API base URL is not defined/);
+    });
+
+    const envCases = [
+      { name: "API_BASE_URL", env: { API_BASE_URL: "https://api.airqo.net" }, expected: "https://api.airqo.net" },
+      { name: "NEXT_PUBLIC_API_BASE_URL", env: { NEXT_PUBLIC_API_BASE_URL: "https://api.airqo.net/api/v1/" }, expected: "https://api.airqo.net" },
+      { name: "NEXT_PUBLIC_API_URL", env: { NEXT_PUBLIC_API_URL: "https://api.airqo.net/api" }, expected: "https://api.airqo.net" },
+      { name: "NEXT_PUBLIC_BASE_URL", env: { NEXT_PUBLIC_BASE_URL: "https://api.airqo.net/" }, expected: "https://api.airqo.net" },
+      { name: "prioritizes API_BASE_URL", env: { API_BASE_URL: "https://server.api", NEXT_PUBLIC_API_URL: "https://client.api" }, expected: "https://server.api" },
+    ];
+
+    it.each(envCases)("resolves from $name with correct stripping", ({ env, expected }) => {
+      delete process.env.API_BASE_URL;
+      delete process.env.NEXT_PUBLIC_API_BASE_URL;
+      delete process.env.NEXT_PUBLIC_API_URL;
+      delete process.env.NEXT_PUBLIC_BASE_URL;
+      Object.assign(process.env, env);
+      expect(resolveApiOrigin()).toBe(expected);
+    });
+  });
+
+  describe("resolveVersionedApiPath", () => {
+    const pathCases = [
+      { name: "empty path", input: "", expected: "/api/v2" },
+      { name: "whitespace path", input: "   ", expected: "/api/v2" },
+      { name: "absolute URL", input: "https://external.api/data", expected: "https://external.api/data" },
+      { name: "already versioned full path", input: "/api/v1/devices", expected: "/api/v1/devices" },
+      { name: "already versioned full path without leading slash", input: "api/v1/devices", expected: "/api/v1/devices" },
+      { name: "version prefix without api", input: "/v1/devices", expected: "/api/v1/devices" },
+      { name: "version prefix without api and slash", input: "v1/devices", expected: "/api/v1/devices" },
+      { name: "unversioned path", input: "/devices", expected: "/api/v2/devices" },
+      { name: "unversioned path without slash", input: "devices", expected: "/api/v2/devices" },
+      { name: "path with query string", input: "/devices?limit=10", expected: "/api/v2/devices?limit=10" },
+      { name: "already versioned with query", input: "/api/v1/devices?limit=10", expected: "/api/v1/devices?limit=10" },
+    ];
+
+    it.each(pathCases)("resolves $name", ({ input, expected }) => {
+      expect(resolveVersionedApiPath(input)).toBe(expected);
+    });
+  });
+
+  describe("buildServerApiUrl", () => {
+    beforeEach(() => {
+      process.env.API_BASE_URL = "https://server.api";
+    });
+
+    const serverUrlCases = [
+      { name: "unversioned path", input: "/devices", expected: "https://server.api/api/v2/devices" },
+      { name: "absolute path", input: "https://external.api/data", expected: "https://external.api/data" },
+    ];
+
+    it.each(serverUrlCases)("builds $name", ({ input, expected }) => {
+      expect(buildServerApiUrl(input)).toBe(expected);
+    });
+  });
+
+  describe("buildBrowserApiUrl", () => {
+    const browserUrlCases = [
+      { name: "unversioned path", input: "/devices", expected: "/api/v2/devices" },
+      { name: "absolute path", input: "https://external.api/data", expected: "https://external.api/data" },
+    ];
+
+    it.each(browserUrlCases)("builds $name", ({ input, expected }) => {
+      expect(buildBrowserApiUrl(input)).toBe(expected);
+    });
+  });
+});
diff --git a/src/vertex/lib/utils.test.ts b/src/vertex/lib/utils.test.ts
new file mode 100644
index 0000000000..82508a3bc5
--- /dev/null
+++ b/src/vertex/lib/utils.test.ts
@@ -0,0 +1,55 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { cn, stripTrailingSlash, getElapsedDurationMapper } from "./utils";
+
+describe("utils", () => {
+  describe("cn", () => {
+    const cnCases = [
+      { name: "merges classes", input: ["bg-red-500", "text-white"], expected: "bg-red-500 text-white" },
+      { name: "handles conditional classes", input: ["bg-red-500", false && "text-white", true && "font-bold"], expected: "bg-red-500 font-bold" },
+      { name: "resolves tailwind conflicts", input: ["px-2 py-1", "p-4"], expected: "p-4" },
+    ];
+
+    it.each(cnCases)("cn: $name", ({ input, expected }) => {
+      expect(cn(...input)).toBe(expected);
+    });
+  });
+
+  describe("stripTrailingSlash", () => {
+    const slashCases = [
+      { name: "no trailing slash", input: "http://example.com", expected: "http://example.com" },
+      { name: "one trailing slash", input: "http://example.com/", expected: "http://example.com" },
+      { name: "multiple trailing slashes", input: "http://example.com///", expected: "http://example.com" },
+      { name: "path with slashes", input: "/api/v1/", expected: "/api/v1" },
+      { name: "only slashes", input: "///", expected: "" },
+    ];
+
+    it.each(slashCases)("stripTrailingSlash: $name", ({ input, expected }) => {
+      expect(stripTrailingSlash(input)).toBe(expected);
+    });
+  });
+
+  describe("getElapsedDurationMapper", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+      vi.setSystemTime(new Date("2024-01-01T12:00:00Z"));
+    });
+
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    const durationCases = [
+      { name: "same time", input: "2024-01-01T12:00:00Z", expectedSeconds: 0, expectedResult: { year: 0, month: 0, week: 0, day: 0, hour: 0, minute: 0, second: 0 } },
+      { name: "one minute ago", input: "2024-01-01T11:59:00Z", expectedSeconds: 60, expectedResult: { year: 0, month: 0, week: 0, day: 0, hour: 0, minute: 1, second: 0 } },
+      { name: "one hour and 5 seconds ago", input: "2024-01-01T10:59:55Z", expectedSeconds: 3605, expectedResult: { year: 0, month: 0, week: 0, day: 0, hour: 1, minute: 0, second: 5 } },
+      { name: "one day ago", input: "2023-12-31T12:00:00Z", expectedSeconds: 86400, expectedResult: { year: 0, month: 0, week: 0, day: 1, hour: 0, minute: 0, second: 0 } },
+      { name: "future date (absolute value)", input: "2024-01-01T12:01:00Z", expectedSeconds: 60, expectedResult: { year: 0, month: 0, week: 0, day: 0, hour: 0, minute: 1, second: 0 } },
+    ];
+
+    it.each(durationCases)("getElapsedDurationMapper: $name", ({ input, expectedSeconds, expectedResult }) => {
+      const [seconds, result] = getElapsedDurationMapper(input);
+      expect(seconds).toBe(expectedSeconds);
+      expect(result).toEqual(expectedResult);
+    });
+  });
+});
diff --git a/src/vertex/test/factories/apiResponseFactory.ts b/src/vertex/test/factories/apiResponseFactory.ts
new file mode 100644
index 0000000000..3a96299155
--- /dev/null
+++ b/src/vertex/test/factories/apiResponseFactory.ts
@@ -0,0 +1,48 @@
+import { AxiosResponse, AxiosError, InternalAxiosRequestConfig, AxiosHeaders } from "axios";
+
+export const mockAxiosSuccess = <T>(data: T, status = 200, headers: Record<string, string> = {}): AxiosResponse<T> => ({
+  data,
+  status,
+  statusText: "OK",
+  headers,
+  config: { headers: new AxiosHeaders() } as InternalAxiosRequestConfig,
+});
+
+export const mockAxiosError = (status: number, message: string, data?: any): AxiosError => {
+  const error = new AxiosError(message, "ERR_BAD_REQUEST", { headers: new AxiosHeaders() } as InternalAxiosRequestConfig);
+  error.response = {
+    data: data || { message },
+    status,
+    statusText: "Error",
+    headers: {},
+    config: { headers: new AxiosHeaders() } as InternalAxiosRequestConfig,
+  };
+  return error;
+};
+
+export const mockNetworkError = (): AxiosError => {
+  const error = new AxiosError("Network Error", "ERR_NETWORK", { headers: new AxiosHeaders() } as InternalAxiosRequestConfig);
+  return error;
+};
+
+export const mockFetchSuccess = <T>(data: T, status = 200): Response => {
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    json: async () => data,
+    text: async () => JSON.stringify(data),
+    headers: new Headers(),
+    statusText: "OK",
+  } as Response;
+};
+
+export const mockFetchError = (status: number, data: any): Response => {
+  return {
+    ok: false,
+    status,
+    json: async () => data,
+    text: async () => JSON.stringify(data),
+    headers: new Headers(),
+    statusText: "Error",
+  } as Response;
+};
diff --git a/src/vertex/test/factories/deviceFactory.ts b/src/vertex/test/factories/deviceFactory.ts
new file mode 100644
index 0000000000..6a793d3d2d
--- /dev/null
+++ b/src/vertex/test/factories/deviceFactory.ts
@@ -0,0 +1,6 @@
+export const createMockDevice = (overrides = {}) => ({
+  _id: "device-123",
+  name: "Test Device",
+  status: "deployed",
+  ...overrides,
+});
diff --git a/src/vertex/test/factories/organizationFactory.ts b/src/vertex/test/factories/organizationFactory.ts
new file mode 100644
index 0000000000..cba70a54ec
--- /dev/null
+++ b/src/vertex/test/factories/organizationFactory.ts
@@ -0,0 +1,6 @@
+export const createMockOrganization = (overrides = {}) => ({
+  _id: "org-123",
+  grp_title: "Test Organization",
+  grp_description: "A test org",
+  ...overrides,
+});
diff --git a/src/vertex/test/factories/userFactory.ts b/src/vertex/test/factories/userFactory.ts
new file mode 100644
index 0000000000..3749d73048
--- /dev/null
+++ b/src/vertex/test/factories/userFactory.ts
@@ -0,0 +1,7 @@
+export const createMockUser = (overrides = {}) => ({
+  _id: "user-123",
+  email: "test@airqo.net",
+  firstName: "Test",
+  lastName: "User",
+  ...overrides,
+});
diff --git a/src/vertex/test/mocks/nextAuth.ts b/src/vertex/test/mocks/nextAuth.ts
new file mode 100644
index 0000000000..26e8b4c345
--- /dev/null
+++ b/src/vertex/test/mocks/nextAuth.ts
@@ -0,0 +1,29 @@
+import { vi } from "vitest";
+
+// Mocks next-auth
+export const mockGetServerSession = vi.fn();
+export const mockGetSession = vi.fn();
+
+// Default mock reset helper
+export const resetNextAuthMocks = () => {
+  mockGetServerSession.mockReset();
+  mockGetSession.mockReset();
+};
+
+export const createMockSession = (overrides = {}) => ({
+  user: {
+    id: "test-user-id",
+    accessToken: "test-access-token",
+    userName: "testuser",
+    organization: "test-org",
+    privilege: "user",
+    firstName: "Test",
+    lastName: "User",
+    country: "UG",
+    timezone: "Africa/Kampala",
+    phoneNumber: "123456789",
+  },
+  expires: "2099-01-01T00:00:00.000Z",
+  accessToken: "test-access-token",
+  ...overrides,
+});
diff --git a/src/vertex/test/mocks/queryClient.ts b/src/vertex/test/mocks/queryClient.ts
new file mode 100644
index 0000000000..6665c2a33c
--- /dev/null
+++ b/src/vertex/test/mocks/queryClient.ts
@@ -0,0 +1,15 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        gcTime: 0,
+        staleTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });
diff --git a/src/vertex/test/utils/domMocks.ts b/src/vertex/test/utils/domMocks.ts
new file mode 100644
index 0000000000..9beafba980
--- /dev/null
+++ b/src/vertex/test/utils/domMocks.ts
@@ -0,0 +1,51 @@
+import { beforeAll, afterAll } from "vitest";
+
+export function setupPointerEventMock() {
+  const originalPointerEvent = window.PointerEvent;
+  const originalScrollIntoView = window.HTMLElement.prototype.scrollIntoView;
+  const originalHasPointerCapture = window.HTMLElement.prototype.hasPointerCapture;
+  const originalReleasePointerCapture = window.HTMLElement.prototype.releasePointerCapture;
+
+  class MockPointerEvent extends Event {
+    button: number;
+    ctrlKey: boolean;
+    pointerType: string;
+
+    constructor(type: string, props: PointerEventInit) {
+      super(type, props);
+      this.button = props.button || 0;
+      this.ctrlKey = props.ctrlKey || false;
+      this.pointerType = props.pointerType || "mouse";
+    }
+  }
+
+  beforeAll(() => {
+    window.PointerEvent = MockPointerEvent as never;
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.hasPointerCapture = () => false;
+    window.HTMLElement.prototype.releasePointerCapture = () => {};
+  });
+
+  afterAll(() => {
+    window.PointerEvent = originalPointerEvent;
+    window.HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
+    window.HTMLElement.prototype.hasPointerCapture = originalHasPointerCapture;
+    window.HTMLElement.prototype.releasePointerCapture = originalReleasePointerCapture;
+  });
+}
+
+export function setupResizeObserverMock() {
+  const originalResizeObserver = window.ResizeObserver;
+
+  beforeAll(() => {
+    window.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  });
+
+  afterAll(() => {
+    window.ResizeObserver = originalResizeObserver;
+  });
+}
diff --git a/src/vertex/test/utils/renderHookWithProviders.tsx b/src/vertex/test/utils/renderHookWithProviders.tsx
new file mode 100644
index 0000000000..03fa670611
--- /dev/null
+++ b/src/vertex/test/utils/renderHookWithProviders.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { renderHook, RenderHookOptions } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createTestQueryClient } from "../mocks/queryClient";
+import { setupStore } from "./renderWithProviders";
+
+interface ExtendedRenderHookOptions<Props> extends RenderHookOptions<Props> {
+  preloadedState?: any;
+}
+
+export function renderHookWithProviders<Result, Props>(
+  renderCallback: (initialProps: Props) => Result,
+  { preloadedState = {}, ...renderOptions }: ExtendedRenderHookOptions<Props> = {}
+) {
+  const store = setupStore(preloadedState);
+  const queryClient = createTestQueryClient();
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    );
+  }
+
+  return {
+    store,
+    queryClient,
+    ...renderHook(renderCallback, { wrapper: Wrapper, ...renderOptions }),
+  };
+}
diff --git a/src/vertex/test/utils/renderWithProviders.tsx b/src/vertex/test/utils/renderWithProviders.tsx
new file mode 100644
index 0000000000..7141639784
--- /dev/null
+++ b/src/vertex/test/utils/renderWithProviders.tsx
@@ -0,0 +1,53 @@
+import React, { ReactElement } from "react";
+import { render, RenderOptions } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createTestQueryClient } from "../mocks/queryClient";
+import userReducer from "@/core/redux/slices/userSlice";
+import sitesReducer from "@/core/redux/slices/sitesSlice";
+import devicesReducer from "@/core/redux/slices/devicesSlice";
+import cohortsReducer from "@/core/redux/slices/cohortsSlice";
+import gridsReducer from "@/core/redux/slices/gridsSlice";
+import groupsReducer from "@/core/redux/slices/groupsSlice";
+
+interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
+  preloadedState?: any;
+  route?: string;
+}
+
+export function setupStore(preloadedState?: any) {
+  const rootReducer = combineReducers({
+    user: userReducer,
+    sites: sitesReducer,
+    devices: devicesReducer,
+    grids: gridsReducer,
+    cohorts: cohortsReducer,
+    groups: groupsReducer,
+  });
+
+  return configureStore({
+    reducer: rootReducer,
+    preloadedState,
+  });
+}
+
+export function renderWithProviders(
+  ui: ReactElement,
+  { preloadedState = {}, ...renderOptions }: ExtendedRenderOptions = {}
+) {
+  const store = setupStore(preloadedState);
+  const queryClient = createTestQueryClient();
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <Provider store={store}>
+        <QueryClientProvider client={queryClient}>
+          {children}
+        </QueryClientProvider>
+      </Provider>
+    );
+  }
+
+  return { store, queryClient, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
+}