From 4f2b95eb851150a23cee4fface529f8c623c4627 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Fri, 14 Mar 2025 14:51:08 -0400
Subject: [PATCH 1/8] Move stat cards to overview

---
 .../evidence/list/components/EvidenceList.tsx            | 5 +----
 .../evidence/list/components/EvidenceListUIStates.tsx    | 9 +--------
 .../evidence/overview/components/EvidenceOverview.tsx    | 4 ++++
 .../evidence/overview/components/EvidenceUIStates.tsx    | 7 +++++++
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
index c28dc23580..9f12435441 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
@@ -37,10 +37,7 @@ export function EvidenceList() {
 
 	return (
 		<div className="space-y-4 w-full max-w-full">
-			{/* Evidence summary statistics cards */}
-			<EvidenceSummaryCards />
-
-			<div className="flex justify-between items-center">
+			<div className="flex items-center gap-3">
 				<SearchInput />
 				<FilterDropdown />
 			</div>
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
index f4e726a430..43b0400dd7 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
@@ -13,15 +13,8 @@ export function EvidenceListSkeleton() {
 	return (
 		<div className="w-full">
 			<div className="space-y-4 mb-6">
-				{/* Summary cards skeleton - matching the style in EvidenceSummaryCards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-					{["empty", "draft", "review", "uptodate"].map((type) => (
-						<Skeleton key={`skeleton-${type}`} className="h-[120px] w-full" />
-					))}
-				</div>
-
 				{/* Filter controls skeleton */}
-				<div className="flex flex-wrap items-center gap-2">
+				<div className="flex items-center gap-3">
 					<div className="w-full max-w-sm h-10 bg-muted animate-pulse rounded" />
 					<div className="h-10 w-40 bg-muted animate-pulse rounded" />
 				</div>
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceOverview.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceOverview.tsx
index 1e892c0e70..4703c7a1b7 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceOverview.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceOverview.tsx
@@ -12,6 +12,7 @@ import {
 	EvidenceErrorState,
 	EvidenceEmptyState,
 } from "./EvidenceUIStates";
+import { EvidenceSummaryCards } from "../../list/components/EvidenceSummaryCards";
 
 export const EvidenceOverview = () => {
 	const { data, isLoading, error } = useEvidenceDashboard();
@@ -31,6 +32,9 @@ export const EvidenceOverview = () => {
 
 	return (
 		<div className="space-y-8">
+			{/* Evidence summary statistics cards */}
+			<EvidenceSummaryCards />
+
 			{/* Charts */}
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
 				<Card>
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceUIStates.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceUIStates.tsx
index b04d92a7d6..d097405bdf 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceUIStates.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/overview/components/EvidenceUIStates.tsx
@@ -18,6 +18,13 @@ export const ChartSkeleton = ({ height = "h-64" }: { height?: string }) => (
 export const EvidenceOverviewSkeleton = () => {
 	return (
 		<div className="space-y-8">
+			{/* Summary cards skeleton */}
+			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+				{["empty", "draft", "review", "uptodate"].map((type) => (
+					<Skeleton key={`skeleton-${type}`} className="h-[120px] w-full" />
+				))}
+			</div>
+
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
 				{/* Department Chart Skeleton */}
 				<Card>

From 53073abb574411d0d97d0e358ea05acfad309833 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Fri, 14 Mar 2025 14:52:10 -0400
Subject: [PATCH 2/8] search bigger

---
 .../(dashboard)/evidence/list/components/EvidenceList.tsx     | 4 +++-
 .../evidence/list/components/EvidenceListUIStates.tsx         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
index 9f12435441..45613ca934 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
@@ -38,7 +38,9 @@ export function EvidenceList() {
 	return (
 		<div className="space-y-4 w-full max-w-full">
 			<div className="flex items-center gap-3">
-				<SearchInput />
+				<div className="w-full max-w-md">
+					<SearchInput />
+				</div>
 				<FilterDropdown />
 			</div>
 
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
index 43b0400dd7..742d0d74a1 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
@@ -15,7 +15,7 @@ export function EvidenceListSkeleton() {
 			<div className="space-y-4 mb-6">
 				{/* Filter controls skeleton */}
 				<div className="flex items-center gap-3">
-					<div className="w-full max-w-sm h-10 bg-muted animate-pulse rounded" />
+					<div className="w-full max-w-md h-10 bg-muted animate-pulse rounded" />
 					<div className="h-10 w-40 bg-muted animate-pulse rounded" />
 				</div>
 			</div>

From 899a5336ca011209722f6f505b73e067df0eac83 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Fri, 14 Mar 2025 15:33:07 -0400
Subject: [PATCH 3/8] Enhance EvidenceList component with improved loading and
 search handling

- Added stabilization logic to prevent flashing states during loading and searching.
- Introduced a new `isSearching` state to manage search transitions effectively.
- Updated `SearchInput` to handle search changes with proper state management and maintain focus during transitions.
- Refactored rendering logic in `EvidenceList` to conditionally display loading skeletons and empty states based on search and loading conditions.
- Improved context management in `useEvidenceTableContext` to track search state and ensure UI transitions are smooth.
---
 .../evidence/list/components/EvidenceList.tsx | 90 +++++++++++++++----
 .../table/EvidenceFilters/SearchInput.tsx     | 71 +++++++++++++--
 .../list/hooks/useEvidenceTableContext.tsx    | 56 +++++++++++-
 yarn.lock                                     | 25 +++---
 4 files changed, 204 insertions(+), 38 deletions(-)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
index 45613ca934..cdaa2dd45e 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
@@ -1,33 +1,75 @@
 "use client";
 
-import { useEvidenceTasksStats } from "../../hooks/useEvidenceTasksStats";
 import { useEvidenceTable } from "../hooks/useEvidenceTableContext";
 import {
 	EvidenceListEmpty,
 	EvidenceListError,
 	EvidenceListSkeleton,
 } from "./EvidenceListUIStates";
-import { EvidenceSummaryCards } from "./EvidenceSummaryCards";
 import { FilterDropdown, SearchInput } from "./table/EvidenceFilters";
 import { PaginationControls } from "./table/EvidenceFilters/PaginationControls";
 import { EvidenceListTable } from "./table/EvidenceListTable";
+import { SkeletonTable } from "./table/SkeletonTable";
+import { useEffect, useRef, useState } from "react";
 
 export function EvidenceList() {
 	const {
 		evidenceTasks,
 		isLoading,
+		isSearching,
 		error,
 		mutate,
 		hasActiveFilters,
 		clearFilters,
 		pagination,
+		search,
 	} = useEvidenceTable();
 
-	// Also track the loading state of the stats
-	const { isLoading: isStatsLoading } = useEvidenceTasksStats();
+	const hasDataRef = useRef(false);
+	const hasSearchRef = useRef(false);
+	// Add a stabilization delay to prevent flashing states
+	const [isStabilized, setIsStabilized] = useState(true);
 
-	// Show loading state if either the list or stats are loading
-	if (isLoading || isStatsLoading) {
+	// Keep track of whether we've ever had data
+	useEffect(() => {
+		if (evidenceTasks && evidenceTasks.length > 0) {
+			hasDataRef.current = true;
+		}
+	}, [evidenceTasks]);
+
+	// Handle search state transitions
+	useEffect(() => {
+		if (search) {
+			hasSearchRef.current = true;
+			// When search changes, we're not stabilized
+			setIsStabilized(false);
+		} else if (hasSearchRef.current && !search) {
+			// If search was set but is now cleared, force a refresh
+			hasSearchRef.current = false;
+			setIsStabilized(false);
+			setTimeout(() => {
+				mutate();
+			}, 0);
+		}
+	}, [search, mutate]);
+
+	// Stabilize state after loading/searching completes
+	useEffect(() => {
+		if (isLoading || isSearching) {
+			// When loading or searching, we're not stabilized
+			setIsStabilized(false);
+		} else {
+			// Add a small delay before considering the state stabilized
+			// This prevents flashing of empty states
+			const timer = setTimeout(() => {
+				setIsStabilized(true);
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [isLoading, isSearching]);
+
+	// Show loading state if it's the initial load and not a search/filter update
+	if (isLoading && !isSearching && !hasDataRef.current) {
 		return <EvidenceListSkeleton />;
 	}
 
@@ -35,6 +77,27 @@ export function EvidenceList() {
 		return <EvidenceListError error={error} onRetry={mutate} />;
 	}
 
+	// Determine what to render in the table area
+	const renderTableContent = () => {
+		// Always show skeleton during active searches or when not stabilized
+		if (isSearching || isLoading || !isStabilized) {
+			return <SkeletonTable />;
+		}
+
+		// Only show empty state when we're stabilized, not searching, not loading, and have no data
+		if ((!evidenceTasks || evidenceTasks.length === 0) && isStabilized) {
+			return (
+				<EvidenceListEmpty
+					hasFilters={hasActiveFilters}
+					onClearFilters={clearFilters}
+				/>
+			);
+		}
+
+		// Show data table when we have data and are in a stable state
+		return <EvidenceListTable data={evidenceTasks || []} />;
+	};
+
 	return (
 		<div className="space-y-4 w-full max-w-full">
 			<div className="flex items-center gap-3">
@@ -44,17 +107,10 @@ export function EvidenceList() {
 				<FilterDropdown />
 			</div>
 
-			{evidenceTasks && evidenceTasks.length === 0 ? (
-				<EvidenceListEmpty
-					hasFilters={hasActiveFilters}
-					onClearFilters={clearFilters}
-				/>
-			) : (
-				<div className="w-full max-w-full">
-					<EvidenceListTable data={evidenceTasks || []} />
-					{pagination && <PaginationControls />}
-				</div>
-			)}
+			<div className="w-full max-w-full">
+				{renderTableContent()}
+				{pagination && !isSearching && isStabilized && <PaginationControls />}
+			</div>
 		</div>
 	);
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
index 4edcefed76..64a80b97d8 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
@@ -2,7 +2,7 @@
 
 import { Input } from "@bubba/ui/input";
 import { Search } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { useDebounce } from "use-debounce";
 import { useEvidenceTable } from "../../../hooks/useEvidenceTableContext";
 
@@ -13,29 +13,86 @@ interface SearchInputProps {
 export function SearchInput({
 	placeholder = "Search evidence...",
 }: SearchInputProps) {
-	const { search, setSearch, setPage } = useEvidenceTable();
+	const { search, setSearch, setPage, isSearching, mutate } =
+		useEvidenceTable();
 	const [inputValue, setInputValue] = useState(search || "");
 	const [debouncedValue] = useDebounce(inputValue, 500);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const isPendingRef = useRef(false);
+	const previousSearchRef = useRef<string | null>(search);
 
-	// Update search query parameter when debounced value changes
+	// Handle search changes with proper state management
 	useEffect(() => {
-		if (debouncedValue === "") {
+		// Only trigger a new search if the value has actually changed
+		if (debouncedValue === previousSearchRef.current) {
+			return;
+		}
+
+		// Track that we're about to make a change
+		isPendingRef.current = true;
+
+		// Update the previous search reference
+		previousSearchRef.current = debouncedValue || null;
+
+		// Handle empty search differently
+		if (!debouncedValue || debouncedValue.trim() === "") {
 			setSearch(null);
+			// Force a data refresh to ensure we exit loading state
+			setTimeout(() => {
+				mutate();
+				isPendingRef.current = false;
+			}, 0);
 		} else {
 			setSearch(debouncedValue);
+			isPendingRef.current = false;
+		}
+
+		// Always reset to first page on search change
+		setPage("1");
+	}, [debouncedValue, setSearch, setPage, mutate]);
+
+	// Maintain focus when search changes
+	useEffect(() => {
+		// If input has focus, keep it focused during search transitions
+		if (document.activeElement === inputRef.current && inputRef.current) {
+			requestAnimationFrame(() => {
+				if (inputRef.current) {
+					inputRef.current.focus();
+					const length = inputRef.current.value.length;
+					inputRef.current.setSelectionRange(length, length);
+				}
+			});
+		}
+
+		// If search is complete and we're not pending, ensure we exit loading state
+		if (!isSearching && !isPendingRef.current && inputValue === "") {
+			mutate();
+		}
+	}, [isSearching, inputValue, mutate]);
+
+	// Handle input changes
+	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const newValue = e.target.value;
+		setInputValue(newValue);
+
+		// Special case: immediately trigger search when clearing input
+		if (newValue === "" && inputValue !== "") {
+			setSearch(null);
+			mutate();
+			setPage("1");
 		}
-		setPage("1"); // Reset to first page when searching
-	}, [debouncedValue, setSearch, setPage]);
+	};
 
 	return (
 		<div className="relative">
 			<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
 			<Input
+				ref={inputRef}
 				type="search"
 				placeholder={placeholder}
 				className="w-full pl-8 h-10"
 				value={inputValue}
-				onChange={(e) => setInputValue(e.target.value)}
+				onChange={handleInputChange}
 			/>
 		</div>
 	);
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
index d5b0481ff3..50bf9908cf 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { createContext, useContext, useMemo, type ReactNode } from "react";
+import {
+	createContext,
+	useContext,
+	useMemo,
+	useState,
+	useRef,
+	useEffect,
+	type ReactNode,
+} from "react";
 import { useQueryState } from "nuqs";
 import type { Frequency, Departments } from "@bubba/db";
 import { useOrganizationEvidenceTasks } from "../../hooks/useEvidenceTasks";
@@ -47,6 +55,7 @@ interface EvidenceTableContextType {
 		  }
 		| undefined;
 	isLoading: boolean;
+	isSearching: boolean;
 	error: Error | undefined;
 
 	// Derived data
@@ -76,6 +85,10 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		defaultValue: "10",
 	});
 
+	// Track if this is initial load or a search/filter update
+	const initialLoadCompleted = useRef(false);
+	const [isSearching, setIsSearching] = useState(false);
+
 	const currentPage = Number.parseInt(page, 10);
 	const currentPageSize = Number.parseInt(pageSize, 10);
 
@@ -97,6 +110,44 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		pageSize: currentPageSize,
 	});
 
+	// Track when search params change
+	useEffect(() => {
+		if (initialLoadCompleted.current) {
+			setIsSearching(true);
+		}
+	}, [
+		search,
+		status,
+		frequency,
+		department,
+		assigneeId,
+		relevance,
+		page,
+		pageSize,
+	]);
+
+	// Track when loading changes
+	useEffect(() => {
+		if (isLoading === false) {
+			// Small delay to ensure UI transitions properly
+			setTimeout(() => {
+				initialLoadCompleted.current = true;
+				setIsSearching(false);
+			}, 50);
+		}
+	}, [isLoading]);
+
+	// Additional safety reset for isSearching when data changes
+	useEffect(() => {
+		if (rawEvidenceTasks && isSearching) {
+			// If we have data, ensure isSearching is eventually set to false
+			const timer = setTimeout(() => {
+				setIsSearching(false);
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [rawEvidenceTasks, isSearching]);
+
 	// Format data for the table
 	const evidenceTasks = useMemo(() => {
 		return rawEvidenceTasks?.map((task) => ({
@@ -156,7 +207,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		setPage("1"); // Reset to first page when clearing filters
 	};
 
-	// Create context value
+	// Create context value including the new isSearching property
 	const contextValue = {
 		// State
 		search,
@@ -183,6 +234,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		evidenceTasks,
 		pagination,
 		isLoading,
+		isSearching,
 		error,
 
 		// Derived data
diff --git a/yarn.lock b/yarn.lock
index 16993e44dd..692af278bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1041,14 +1041,14 @@
     formdata-node "^4.3.2"
     node-fetch "^2.6.7"
 
-"@bubba/analytics@packages/analytics", "@bubba/analytics@workspace:*":
+"@bubba/analytics@^workspace:packages/analytics", "@bubba/analytics@workspace:*":
   version "workspace:packages/analytics"
   resolved "workspace:packages/analytics"
   dependencies:
     posthog-js "^1.215.3"
     posthog-node "^4.4.1"
 
-"@bubba/db@packages/db", "@bubba/db@workspace:*":
+"@bubba/db@^workspace:packages/db", "@bubba/db@workspace:*":
   version "workspace:packages/db"
   resolved "workspace:packages/db"
   devDependencies:
@@ -1063,7 +1063,7 @@
     "@prisma/extension-accelerate" "^1.2.2"
     prisma "^6.3.1"
 
-"@bubba/email@packages/email":
+"@bubba/email@^workspace:packages/email":
   version "workspace:packages/email"
   resolved "workspace:packages/email"
   devDependencies:
@@ -1083,7 +1083,7 @@
     react-email "3.0.4"
     responsive-react-email "^0.0.5"
 
-"@bubba/integrations@packages/integrations":
+"@bubba/integrations@^workspace:packages/integrations":
   version "workspace:packages/integrations"
   resolved "workspace:packages/integrations"
   devDependencies:
@@ -1097,14 +1097,14 @@
     sharp "^0.33.5"
     zod "^3.24.2"
 
-"@bubba/kv@packages/kv":
+"@bubba/kv@^workspace:packages/kv":
   version "workspace:packages/kv"
   resolved "workspace:packages/kv"
   dependencies:
     "@upstash/redis" "^1.34.2"
     server-only "0.0.1"
 
-"@bubba/notifications@packages/notifications", "@bubba/notifications@workspace:*":
+"@bubba/notifications@^workspace:packages/notifications", "@bubba/notifications@workspace:*":
   version "workspace:packages/notifications"
   resolved "workspace:packages/notifications"
   devDependencies:
@@ -1113,11 +1113,11 @@
     "@novu/node" "^2.0.1"
     nanoid "5.1.0"
 
-"@bubba/tsconfig@packages/tsconfig", "@bubba/tsconfig@workspace:*":
+"@bubba/tsconfig@^workspace:packages/tsconfig", "@bubba/tsconfig@workspace:*":
   version "workspace:packages/tsconfig"
   resolved "workspace:packages/tsconfig"
 
-"@bubba/ui@packages/ui", "@bubba/ui@workspace:*":
+"@bubba/ui@^workspace:packages/ui", "@bubba/ui@workspace:*":
   version "workspace:packages/ui"
   resolved "workspace:packages/ui"
   devDependencies:
@@ -1181,7 +1181,7 @@
     use-callback-ref "^1.3.3"
     vaul "^1.0.0"
 
-"@bubba/utils@packages/utils", "@bubba/utils@workspace:*":
+"@bubba/utils@^workspace:packages/utils", "@bubba/utils@workspace:*":
   version "workspace:packages/utils"
   resolved "workspace:packages/utils"
   devDependencies:
@@ -6394,7 +6394,7 @@ commander@11.1.0:
   resolved "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz"
   integrity sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==
 
-"comp.ai@apps/app":
+comp.ai@^workspace:apps/app:
   version "workspace:apps/app"
   resolved "workspace:apps/app"
   devDependencies:
@@ -11015,7 +11015,7 @@ plist@^3.1.0:
     base64-js "^1.5.1"
     xmlbuilder "^15.1.1"
 
-"portal@apps/portal":
+portal@^workspace:apps/portal:
   version "workspace:apps/portal"
   resolved "workspace:apps/portal"
   devDependencies:
@@ -13654,11 +13654,12 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
-"web@apps/web":
+web@^workspace:apps/web:
   version "workspace:apps/web"
   resolved "workspace:apps/web"
   devDependencies:
     "@bubba/analytics" "workspace:*"
+  devDependencies:
     "@trigger.dev/build" "^3.3.15"
     "@types/node" "^22.13.2"
     "@types/react" "^19.0.8"

From 66bbd8e2c9377117b868728e99041d4ae5b39051 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Mon, 17 Mar 2025 11:34:13 -0400
Subject: [PATCH 4/8] turned evidence table into reusable table

---
 .../evidence/list/components/EvidenceList.tsx | 110 +------
 .../list/components/EvidenceListUIStates.tsx  |  34 +-
 .../table/EvidenceFilters/FilterDropdown.tsx  | 207 -------------
 .../EvidenceFilters/PaginationControls.tsx    |  78 -----
 .../table/EvidenceFilters/SearchInput.tsx     |  99 ------
 .../components/table/EvidenceListTable.tsx    | 189 +++++-------
 .../list/components/table/SkeletonTable.tsx   |  68 ----
 .../table/components/AssigneeAvatar.tsx       |  26 ++
 .../table/components/filterCategories.tsx     | 107 +++++++
 .../table/components/filterConfigs.tsx        |  31 ++
 .../list/hooks/useEvidenceTableContext.tsx    |  39 ++-
 .../components/ui/data-table/DataTable.tsx    | 292 ++++++++++++++++++
 .../ui/data-table/DataTableHeader.tsx         |  62 ++++
 .../ui/data-table/DataTablePagination.tsx     |  85 +++++
 .../ui/data-table/DataTableSkeleton.tsx       |  47 +++
 .../app/src/components/ui/data-table/index.ts |   3 +
 apps/app/src/hooks/useDebounce.ts             |  12 +
 17 files changed, 786 insertions(+), 703 deletions(-)
 delete mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/FilterDropdown.tsx
 delete mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/PaginationControls.tsx
 delete mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
 delete mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/SkeletonTable.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/AssigneeAvatar.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterCategories.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterConfigs.tsx
 create mode 100644 apps/app/src/components/ui/data-table/DataTable.tsx
 create mode 100644 apps/app/src/components/ui/data-table/DataTableHeader.tsx
 create mode 100644 apps/app/src/components/ui/data-table/DataTablePagination.tsx
 create mode 100644 apps/app/src/components/ui/data-table/DataTableSkeleton.tsx
 create mode 100644 apps/app/src/components/ui/data-table/index.ts
 create mode 100644 apps/app/src/hooks/useDebounce.ts

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
index cdaa2dd45e..ae84b5cdf4 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceList.tsx
@@ -1,116 +1,10 @@
 "use client";
 
 import { useEvidenceTable } from "../hooks/useEvidenceTableContext";
-import {
-	EvidenceListEmpty,
-	EvidenceListError,
-	EvidenceListSkeleton,
-} from "./EvidenceListUIStates";
-import { FilterDropdown, SearchInput } from "./table/EvidenceFilters";
-import { PaginationControls } from "./table/EvidenceFilters/PaginationControls";
 import { EvidenceListTable } from "./table/EvidenceListTable";
-import { SkeletonTable } from "./table/SkeletonTable";
-import { useEffect, useRef, useState } from "react";
 
 export function EvidenceList() {
-	const {
-		evidenceTasks,
-		isLoading,
-		isSearching,
-		error,
-		mutate,
-		hasActiveFilters,
-		clearFilters,
-		pagination,
-		search,
-	} = useEvidenceTable();
+	const { evidenceTasks } = useEvidenceTable();
 
-	const hasDataRef = useRef(false);
-	const hasSearchRef = useRef(false);
-	// Add a stabilization delay to prevent flashing states
-	const [isStabilized, setIsStabilized] = useState(true);
-
-	// Keep track of whether we've ever had data
-	useEffect(() => {
-		if (evidenceTasks && evidenceTasks.length > 0) {
-			hasDataRef.current = true;
-		}
-	}, [evidenceTasks]);
-
-	// Handle search state transitions
-	useEffect(() => {
-		if (search) {
-			hasSearchRef.current = true;
-			// When search changes, we're not stabilized
-			setIsStabilized(false);
-		} else if (hasSearchRef.current && !search) {
-			// If search was set but is now cleared, force a refresh
-			hasSearchRef.current = false;
-			setIsStabilized(false);
-			setTimeout(() => {
-				mutate();
-			}, 0);
-		}
-	}, [search, mutate]);
-
-	// Stabilize state after loading/searching completes
-	useEffect(() => {
-		if (isLoading || isSearching) {
-			// When loading or searching, we're not stabilized
-			setIsStabilized(false);
-		} else {
-			// Add a small delay before considering the state stabilized
-			// This prevents flashing of empty states
-			const timer = setTimeout(() => {
-				setIsStabilized(true);
-			}, 100);
-			return () => clearTimeout(timer);
-		}
-	}, [isLoading, isSearching]);
-
-	// Show loading state if it's the initial load and not a search/filter update
-	if (isLoading && !isSearching && !hasDataRef.current) {
-		return <EvidenceListSkeleton />;
-	}
-
-	if (error) {
-		return <EvidenceListError error={error} onRetry={mutate} />;
-	}
-
-	// Determine what to render in the table area
-	const renderTableContent = () => {
-		// Always show skeleton during active searches or when not stabilized
-		if (isSearching || isLoading || !isStabilized) {
-			return <SkeletonTable />;
-		}
-
-		// Only show empty state when we're stabilized, not searching, not loading, and have no data
-		if ((!evidenceTasks || evidenceTasks.length === 0) && isStabilized) {
-			return (
-				<EvidenceListEmpty
-					hasFilters={hasActiveFilters}
-					onClearFilters={clearFilters}
-				/>
-			);
-		}
-
-		// Show data table when we have data and are in a stable state
-		return <EvidenceListTable data={evidenceTasks || []} />;
-	};
-
-	return (
-		<div className="space-y-4 w-full max-w-full">
-			<div className="flex items-center gap-3">
-				<div className="w-full max-w-md">
-					<SearchInput />
-				</div>
-				<FilterDropdown />
-			</div>
-
-			<div className="w-full max-w-full">
-				{renderTableContent()}
-				{pagination && !isSearching && isStabilized && <PaginationControls />}
-			</div>
-		</div>
-	);
+	return <EvidenceListTable data={evidenceTasks || []} />;
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
index 742d0d74a1..ce0e75d8f2 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/EvidenceListUIStates.tsx
@@ -1,36 +1,20 @@
 import React from "react";
-import { SkeletonTable } from "./table/SkeletonTable";
 import { Alert, AlertDescription, AlertTitle } from "@bubba/ui/alert";
 import { AlertCircle, FileQuestion, SearchX } from "lucide-react";
 import { useI18n } from "@/locales/client";
 import { Button } from "@bubba/ui/button";
-import { Skeleton } from "@bubba/ui/skeleton";
-
-/**
- * Loading state component for the evidence list
- */
-export function EvidenceListSkeleton() {
-	return (
-		<div className="w-full">
-			<div className="space-y-4 mb-6">
-				{/* Filter controls skeleton */}
-				<div className="flex items-center gap-3">
-					<div className="w-full max-w-md h-10 bg-muted animate-pulse rounded" />
-					<div className="h-10 w-40 bg-muted animate-pulse rounded" />
-				</div>
-			</div>
-
-			{/* Table skeleton */}
-			<SkeletonTable />
-		</div>
-	);
-}
 
 interface ErrorStateProps {
 	error: Error;
 	onRetry?: () => void;
 }
 
+interface EmptyStateProps {
+	message?: string;
+	hasFilters?: boolean;
+	onClearFilters?: () => void;
+}
+
 /**
  * Error state component for the evidence list
  */
@@ -58,12 +42,6 @@ export function EvidenceListError({ error, onRetry }: ErrorStateProps) {
 	);
 }
 
-interface EmptyStateProps {
-	message?: string;
-	hasFilters?: boolean;
-	onClearFilters?: () => void;
-}
-
 /**
  * Empty state component for the evidence list
  */
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/FilterDropdown.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/FilterDropdown.tsx
deleted file mode 100644
index 9eb417a4e7..0000000000
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/FilterDropdown.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-"use client";
-
-import { Button } from "@bubba/ui/button";
-import { Badge } from "@bubba/ui/badge";
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-	DropdownMenuCheckboxItem,
-} from "@bubba/ui/dropdown-menu";
-import {
-	CheckCircle2,
-	Filter,
-	XCircle,
-	Building,
-	AlertTriangle,
-} from "lucide-react";
-import { Avatar, AvatarFallback, AvatarImage } from "@bubba/ui/avatar";
-import { useEvidenceTable } from "../../../hooks/useEvidenceTableContext";
-
-export function FilterDropdown() {
-	const {
-		status,
-		setStatus,
-		frequency,
-		setFrequency,
-		department,
-		setDepartment,
-		assigneeId,
-		setAssigneeId,
-		relevance,
-		setRelevance,
-		setPage,
-		frequencies,
-		departments,
-		assignees,
-		hasActiveFilters,
-		clearFilters,
-	} = useEvidenceTable();
-
-	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<Button variant="outline" size="sm" className="h-10">
-					<Filter className="h-4 w-4 mr-2" />
-					Filters
-					{hasActiveFilters && (
-						<Badge variant="secondary" className="ml-2 px-1 py-0">
-							{(status ? 1 : 0) +
-								(frequency ? 1 : 0) +
-								(department ? 1 : 0) +
-								(assigneeId ? 1 : 0) +
-								(relevance ? 1 : 0)}
-						</Badge>
-					)}
-				</Button>
-			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end" className="w-[500px] max-w-[90vw]">
-				<div className="grid grid-cols-2 gap-4 p-2">
-					{/* Status, Frequency, and Relevance in first column */}
-					<div>
-						<DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
-						<div className="space-y-1 mb-3">
-							<DropdownMenuCheckboxItem
-								checked={status === "published"}
-								onCheckedChange={() => {
-									setStatus(status === "published" ? null : "published");
-									setPage("1"); // Reset to first page when filtering
-								}}
-							>
-								<div className="flex items-center gap-2">
-									<CheckCircle2 size={16} className="text-green-500" />
-									<span>Published</span>
-								</div>
-							</DropdownMenuCheckboxItem>
-							<DropdownMenuCheckboxItem
-								checked={status === "draft"}
-								onCheckedChange={() => {
-									setStatus(status === "draft" ? null : "draft");
-									setPage("1"); // Reset to first page when filtering
-								}}
-							>
-								<div className="flex items-center gap-2">
-									<XCircle size={16} className="text-red-500" />
-									<span>Draft</span>
-								</div>
-							</DropdownMenuCheckboxItem>
-						</div>
-
-						<DropdownMenuLabel>Filter by Relevance</DropdownMenuLabel>
-						<div className="space-y-1 mb-3">
-							<DropdownMenuCheckboxItem
-								checked={relevance === "relevant"}
-								onCheckedChange={() => {
-									setRelevance(relevance === "relevant" ? null : "relevant");
-									setPage("1"); // Reset to first page when filtering
-								}}
-							>
-								<div className="flex items-center gap-2">
-									<CheckCircle2 size={16} className="text-green-500" />
-									<span>Relevant</span>
-								</div>
-							</DropdownMenuCheckboxItem>
-							<DropdownMenuCheckboxItem
-								checked={relevance === "not-relevant"}
-								onCheckedChange={() => {
-									setRelevance(
-										relevance === "not-relevant" ? null : "not-relevant",
-									);
-									setPage("1"); // Reset to first page when filtering
-								}}
-							>
-								<div className="flex items-center gap-2">
-									<AlertTriangle size={16} className="text-yellow-500" />
-									<span>Not Relevant</span>
-								</div>
-							</DropdownMenuCheckboxItem>
-						</div>
-
-						<DropdownMenuLabel>Filter by Frequency</DropdownMenuLabel>
-						<div className="space-y-1">
-							{frequencies.map((freq) => (
-								<DropdownMenuCheckboxItem
-									key={freq}
-									checked={frequency === freq}
-									onCheckedChange={() => {
-										setFrequency(frequency === freq ? null : freq);
-										setPage("1"); // Reset to first page when filtering
-									}}
-								>
-									{freq}
-								</DropdownMenuCheckboxItem>
-							))}
-						</div>
-					</div>
-
-					{/* Department and Assignee in second column */}
-					<div>
-						<DropdownMenuLabel>Filter by Department</DropdownMenuLabel>
-						<div className="space-y-1 mb-3 max-h-[150px] overflow-y-auto">
-							{departments.map((dept) => (
-								<DropdownMenuCheckboxItem
-									key={dept}
-									checked={department === dept}
-									onCheckedChange={() => {
-										setDepartment(department === dept ? null : dept);
-										setPage("1"); // Reset to first page when filtering
-									}}
-								>
-									<div className="flex items-center gap-2">
-										<Building size={16} className="text-muted-foreground" />
-										<span>{dept.replace(/_/g, " ").toUpperCase()}</span>
-									</div>
-								</DropdownMenuCheckboxItem>
-							))}
-						</div>
-
-						<DropdownMenuLabel>Filter by Assignee</DropdownMenuLabel>
-						<div className="space-y-1 max-h-[150px] overflow-y-auto">
-							{assignees.map((assignee) => (
-								<DropdownMenuCheckboxItem
-									key={assignee.id}
-									checked={assigneeId === assignee.id}
-									onCheckedChange={() => {
-										setAssigneeId(
-											assigneeId === assignee.id ? null : assignee.id,
-										);
-										setPage("1"); // Reset to first page when filtering
-									}}
-								>
-									<div className="flex items-center gap-2">
-										<Avatar className="h-5 w-5">
-											<AvatarImage
-												src={assignee.image || undefined}
-												alt={assignee.name || ""}
-											/>
-											<AvatarFallback className="text-xs">
-												{assignee.name ? assignee.name.charAt(0) : "?"}
-											</AvatarFallback>
-										</Avatar>
-										<span>{assignee.name}</span>
-									</div>
-								</DropdownMenuCheckboxItem>
-							))}
-						</div>
-					</div>
-				</div>
-
-				{hasActiveFilters && (
-					<div className="px-2 pb-2">
-						<DropdownMenuSeparator />
-						<Button
-							variant="ghost"
-							size="sm"
-							className="w-full justify-start text-sm font-normal mt-2"
-							onClick={clearFilters}
-						>
-							Clear all filters
-						</Button>
-					</div>
-				)}
-			</DropdownMenuContent>
-		</DropdownMenu>
-	);
-}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/PaginationControls.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/PaginationControls.tsx
deleted file mode 100644
index cc89c6a73f..0000000000
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/PaginationControls.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-"use client";
-
-import { Button } from "@bubba/ui/button";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@bubba/ui/select";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useEvidenceTable } from "../../../hooks/useEvidenceTableContext";
-
-export function PaginationControls() {
-	const { page, setPage, pageSize, setPageSize, pagination } =
-		useEvidenceTable();
-
-	if (!pagination) return null;
-
-	const { totalPages, totalCount } = pagination;
-	const currentPage = Number.parseInt(page, 10);
-
-	const handlePageSizeChange = (value: string) => {
-		setPageSize(value);
-		setPage("1"); // Reset to first page when changing page size
-	};
-
-	return (
-		<div className="flex items-center justify-between mt-4">
-			<div className="text-sm text-muted-foreground">
-				{totalCount} {totalCount === 1 ? "item" : "items"}
-			</div>
-			<div className="flex items-center space-x-2">
-				<div className="flex items-center space-x-2">
-					<p className="text-sm font-medium">Rows per page</p>
-					<Select value={pageSize} onValueChange={handlePageSizeChange}>
-						<SelectTrigger className="h-8 w-[70px]">
-							<SelectValue placeholder={pageSize} />
-						</SelectTrigger>
-						<SelectContent side="top">
-							{[5, 10, 20, 50, 100].map((size) => (
-								<SelectItem key={size} value={size.toString()}>
-									{size}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				</div>
-				<div className="flex items-center space-x-2">
-					<Button
-						variant="outline"
-						size="icon"
-						className="h-8 w-8"
-						onClick={() => setPage((currentPage - 1).toString())}
-						disabled={currentPage <= 1}
-					>
-						<ChevronLeft className="h-4 w-4" />
-					</Button>
-					<div className="flex items-center gap-1">
-						<span className="text-sm font-medium">{currentPage}</span>
-						<span className="text-sm text-muted-foreground">
-							of {totalPages || 1}
-						</span>
-					</div>
-					<Button
-						variant="outline"
-						size="icon"
-						className="h-8 w-8"
-						onClick={() => setPage((currentPage + 1).toString())}
-						disabled={currentPage >= totalPages}
-					>
-						<ChevronRight className="h-4 w-4" />
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
deleted file mode 100644
index 64a80b97d8..0000000000
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/SearchInput.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-"use client";
-
-import { Input } from "@bubba/ui/input";
-import { Search } from "lucide-react";
-import { useEffect, useState, useRef } from "react";
-import { useDebounce } from "use-debounce";
-import { useEvidenceTable } from "../../../hooks/useEvidenceTableContext";
-
-interface SearchInputProps {
-	placeholder?: string;
-}
-
-export function SearchInput({
-	placeholder = "Search evidence...",
-}: SearchInputProps) {
-	const { search, setSearch, setPage, isSearching, mutate } =
-		useEvidenceTable();
-	const [inputValue, setInputValue] = useState(search || "");
-	const [debouncedValue] = useDebounce(inputValue, 500);
-	const inputRef = useRef<HTMLInputElement>(null);
-	const isPendingRef = useRef(false);
-	const previousSearchRef = useRef<string | null>(search);
-
-	// Handle search changes with proper state management
-	useEffect(() => {
-		// Only trigger a new search if the value has actually changed
-		if (debouncedValue === previousSearchRef.current) {
-			return;
-		}
-
-		// Track that we're about to make a change
-		isPendingRef.current = true;
-
-		// Update the previous search reference
-		previousSearchRef.current = debouncedValue || null;
-
-		// Handle empty search differently
-		if (!debouncedValue || debouncedValue.trim() === "") {
-			setSearch(null);
-			// Force a data refresh to ensure we exit loading state
-			setTimeout(() => {
-				mutate();
-				isPendingRef.current = false;
-			}, 0);
-		} else {
-			setSearch(debouncedValue);
-			isPendingRef.current = false;
-		}
-
-		// Always reset to first page on search change
-		setPage("1");
-	}, [debouncedValue, setSearch, setPage, mutate]);
-
-	// Maintain focus when search changes
-	useEffect(() => {
-		// If input has focus, keep it focused during search transitions
-		if (document.activeElement === inputRef.current && inputRef.current) {
-			requestAnimationFrame(() => {
-				if (inputRef.current) {
-					inputRef.current.focus();
-					const length = inputRef.current.value.length;
-					inputRef.current.setSelectionRange(length, length);
-				}
-			});
-		}
-
-		// If search is complete and we're not pending, ensure we exit loading state
-		if (!isSearching && !isPendingRef.current && inputValue === "") {
-			mutate();
-		}
-	}, [isSearching, inputValue, mutate]);
-
-	// Handle input changes
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const newValue = e.target.value;
-		setInputValue(newValue);
-
-		// Special case: immediately trigger search when clearing input
-		if (newValue === "" && inputValue !== "") {
-			setSearch(null);
-			mutate();
-			setPage("1");
-		}
-	};
-
-	return (
-		<div className="relative">
-			<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-			<Input
-				ref={inputRef}
-				type="search"
-				placeholder={placeholder}
-				className="w-full pl-8 h-10"
-				value={inputValue}
-				onChange={handleInputChange}
-			/>
-		</div>
-	);
-}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceListTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceListTable.tsx
index b495a5038e..fdbe556334 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceListTable.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceListTable.tsx
@@ -1,123 +1,98 @@
 "use client";
 
-import {
-	type Column,
-	flexRender,
-	getCoreRowModel,
-	useReactTable,
-	getSortedRowModel,
-	type SortingState,
-} from "@tanstack/react-table";
-import { Table, TableBody, TableCell, TableRow } from "@bubba/ui/table";
+import { DataTable } from "@/components/ui/data-table";
 import { EvidenceListColumns } from "./EvidenceListColumns";
-import { EvidenceListHeader } from "./EvidenceListHeader";
 import type { EvidenceTaskRow } from "../../types";
-import { cn } from "@bubba/ui/cn";
-import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useEvidenceTable } from "../../hooks/useEvidenceTableContext";
+import { getFilterCategories } from "./components/filterCategories";
 
 export function EvidenceListTable({ data }: { data: EvidenceTaskRow[] }) {
 	const router = useRouter();
-	const [sorting, setSorting] = useState<SortingState>([
-		{
-			id: "name",
-			desc: false,
-		},
-	]);
-
-	const table = useReactTable({
-		data,
-		columns: EvidenceListColumns,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		enableColumnResizing: true,
-		columnResizeMode: "onChange",
-		defaultColumn: {
-			minSize: 40,
-			size: 150,
-		},
-		state: {
-			sorting,
-			columnSizing: {
-				// Make the relevance column smaller
-				relevance: 100,
-			},
-		},
-		onSortingChange: setSorting,
-	});
+	const {
+		page,
+		setPage,
+		pageSize,
+		setPageSize,
+		pagination,
+		search,
+		setSearch,
+		status,
+		setStatus,
+		frequency,
+		setFrequency,
+		department,
+		setDepartment,
+		assigneeId,
+		setAssigneeId,
+		relevance,
+		setRelevance,
+		frequencies,
+		departments,
+		assignees,
+		hasActiveFilters,
+		clearFilters,
+		isLoading,
+		isSearching,
+	} = useEvidenceTable();
 
 	const handleRowClick = (evidenceId: string) => {
 		router.push(`/evidence/${evidenceId}`);
 	};
 
+	const activeFilterCount = [
+		status,
+		frequency,
+		department,
+		assigneeId,
+		relevance,
+	].filter(Boolean).length;
+
+	const filterCategories = getFilterCategories({
+		status,
+		setStatus,
+		relevance,
+		setRelevance,
+		frequency,
+		setFrequency,
+		department,
+		setDepartment,
+		assigneeId,
+		setAssigneeId,
+		frequencies,
+		departments,
+		assignees,
+		setPage,
+	});
+
 	return (
-		<div className="relative w-full border">
-			<div
-				className="overflow-x-auto"
-				style={{ WebkitOverflowScrolling: "touch" }}
-			>
-				<Table>
-					<EvidenceListHeader table={table} />
-					<TableBody>
-						{table.getRowModel().rows?.length ? (
-							table.getRowModel().rows.map((row) => (
-								<TableRow
-									key={row.id}
-									data-state={row.getIsSelected() && "selected"}
-									className="hover:bg-muted/50 cursor-pointer"
-									onClick={() => handleRowClick(row.original.id)}
-								>
-									{row.getVisibleCells().map((cell) => (
-										<TableCell
-											key={cell.id}
-											className={cn(
-												"p-4 relative whitespace-nowrap",
-												(cell.column.id === "status" ||
-													cell.column.id === "department" ||
-													cell.column.id === "frequency" ||
-													cell.column.id === "nextReviewDate" ||
-													cell.column.id === "assignee" ||
-													cell.column.id === "relevance") &&
-													"hidden md:table-cell",
-												cell.column.id === "relevance" && "max-w-[100px]",
-											)}
-											style={{ width: cell.column.getSize() }}
-										>
-											<div>
-												{flexRender(
-													cell.column.columnDef.cell,
-													cell.getContext(),
-												)}
-											</div>
-											<div
-												className={`absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-border opacity-0 hover:opacity-100 ${
-													table.getState().columnSizingInfo.isResizingColumn ===
-													cell.column.id
-														? "bg-primary opacity-100"
-														: ""
-												}`}
-												onClick={(e) => {
-													// Stop propagation to prevent row click when resizing
-													e.stopPropagation();
-												}}
-											/>
-										</TableCell>
-									))}
-								</TableRow>
-							))
-						) : (
-							<TableRow>
-								<TableCell
-									colSpan={EvidenceListColumns.length}
-									className="h-24 text-center"
-								>
-									No evidence tasks found.
-								</TableCell>
-							</TableRow>
-						)}
-					</TableBody>
-				</Table>
-			</div>
-		</div>
+		<DataTable
+			data={data || []}
+			columns={EvidenceListColumns}
+			onRowClick={(row: EvidenceTaskRow) => handleRowClick(row.id)}
+			emptyMessage="No evidence tasks found."
+			isLoading={isLoading || isSearching}
+			pagination={{
+				page: Number(page),
+				pageSize: Number(pageSize),
+				totalCount: pagination?.totalCount || 0,
+				totalPages: pagination?.totalPages || 0,
+				hasNextPage: pagination?.hasNextPage || false,
+				hasPreviousPage: pagination?.hasPreviousPage || false,
+			}}
+			onPageChange={(page) => setPage(page.toString())}
+			onPageSizeChange={(pageSize) => setPageSize(pageSize.toString())}
+			search={{
+				value: search || "",
+				onChange: setSearch,
+				placeholder: "Search evidence tasks...",
+			}}
+			filters={{
+				categories: filterCategories,
+				hasActiveFilters,
+				onClearFilters: clearFilters,
+				activeFilterCount,
+			}}
+		/>
 	);
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/SkeletonTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/SkeletonTable.tsx
deleted file mode 100644
index 6ee50126af..0000000000
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/SkeletonTable.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Skeleton } from "@bubba/ui/skeleton";
-import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
-} from "@bubba/ui/table";
-import { cn } from "@bubba/ui/cn";
-
-const SKELETON_ROWS = [
-	"skeleton-1",
-	"skeleton-2",
-	"skeleton-3",
-	"skeleton-4",
-	"skeleton-5",
-] as const;
-
-export const SkeletonTable = () => {
-	return (
-		<Table>
-			<TableHeader>
-				<TableRow>
-					<TableHead>
-						<Skeleton className="h-4 w-[200px]" />
-					</TableHead>
-					<TableHead className="hidden md:table-cell">
-						<Skeleton className="h-4 w-[100px]" />
-					</TableHead>
-					<TableHead className="hidden md:table-cell">
-						<Skeleton className="h-4 w-[150px]" />
-					</TableHead>
-					<TableHead className="hidden md:table-cell">
-						<Skeleton className="h-4 w-[150px]" />
-					</TableHead>
-					<TableHead className="hidden md:table-cell">
-						<Skeleton className="h-4 w-[150px]" />
-					</TableHead>
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				{SKELETON_ROWS.map((key) => (
-					<TableRow key={key} className="h-[54px]">
-						<TableCell>
-							<div className="flex flex-col gap-2">
-								<Skeleton className="h-4 w-[200px]" />
-								<Skeleton className="h-4 w-[100px] md:hidden" />
-							</div>
-						</TableCell>
-						<TableCell className="hidden md:table-cell">
-							<Skeleton className="h-4 w-[100px]" />
-						</TableCell>
-						<TableCell className="hidden md:table-cell">
-							<Skeleton className="h-4 w-[150px]" />
-						</TableCell>
-						<TableCell className="hidden md:table-cell">
-							<Skeleton className="h-4 w-[150px]" />
-						</TableCell>
-						<TableCell className="hidden md:table-cell">
-							<Skeleton className="h-4 w-[150px]" />
-						</TableCell>
-					</TableRow>
-				))}
-			</TableBody>
-		</Table>
-	);
-};
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/AssigneeAvatar.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/AssigneeAvatar.tsx
new file mode 100644
index 0000000000..61ad74e1ba
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/AssigneeAvatar.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+interface AssigneeAvatarProps {
+	assignee: {
+		name: string | null;
+		image: string | null;
+	};
+}
+
+export function AssigneeAvatar({ assignee }: AssigneeAvatarProps) {
+	if (assignee.image) {
+		return (
+			<img
+				src={assignee.image}
+				alt={assignee.name || "Unknown"}
+				className="h-5 w-5 rounded-full"
+			/>
+		);
+	}
+
+	return (
+		<div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs">
+			{(assignee.name || "?").charAt(0)}
+		</div>
+	);
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterCategories.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterCategories.tsx
new file mode 100644
index 0000000000..990069bf29
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterCategories.tsx
@@ -0,0 +1,107 @@
+"use client";
+
+import {
+	STATUS_FILTERS,
+	RELEVANCE_FILTERS,
+	DEPARTMENT_ICON,
+} from "./filterConfigs";
+import { AssigneeAvatar } from "./AssigneeAvatar";
+
+interface FilterCategoriesProps {
+	status: string | null;
+	setStatus: (status: string | null) => void;
+	relevance: string | null;
+	setRelevance: (relevance: string | null) => void;
+	frequency: string | null;
+	setFrequency: (frequency: string | null) => void;
+	department: string | null;
+	setDepartment: (department: string | null) => void;
+	assigneeId: string | null;
+	setAssigneeId: (assigneeId: string | null) => void;
+	frequencies: string[];
+	departments: string[];
+	assignees: Array<{ id: string; name: string | null; image: string | null }>;
+	setPage: (page: string) => void;
+}
+
+export function getFilterCategories({
+	status,
+	setStatus,
+	relevance,
+	setRelevance,
+	frequency,
+	setFrequency,
+	department,
+	setDepartment,
+	assigneeId,
+	setAssigneeId,
+	frequencies,
+	departments,
+	assignees,
+	setPage,
+}: FilterCategoriesProps) {
+	return [
+		{
+			label: "Filter by Status",
+			items: STATUS_FILTERS.map((filter) => ({
+				...filter,
+				checked: status === filter.value,
+				onChange: (checked: boolean) => {
+					setStatus(checked ? filter.value : null);
+					setPage("1");
+				},
+			})),
+		},
+		{
+			label: "Filter by Relevance",
+			items: RELEVANCE_FILTERS.map((filter) => ({
+				...filter,
+				checked: relevance === filter.value,
+				onChange: (checked: boolean) => {
+					setRelevance(checked ? filter.value : null);
+					setPage("1");
+				},
+			})),
+		},
+		{
+			label: "Filter by Frequency",
+			items: frequencies.map((freq) => ({
+				label: freq,
+				value: freq,
+				checked: frequency === freq,
+				onChange: (checked: boolean) => {
+					setFrequency(checked ? freq : null);
+					setPage("1");
+				},
+			})),
+		},
+		{
+			label: "Filter by Department",
+			items: departments.map((dept) => ({
+				label: dept.replace(/_/g, " ").toUpperCase(),
+				value: dept,
+				checked: department === dept,
+				onChange: (checked: boolean) => {
+					setDepartment(checked ? dept : null);
+					setPage("1");
+				},
+				icon: DEPARTMENT_ICON,
+			})),
+			maxHeight: "150px",
+		},
+		{
+			label: "Filter by Assignee",
+			items: assignees.map((assignee) => ({
+				label: assignee.name || "Unknown",
+				value: assignee.id,
+				checked: assigneeId === assignee.id,
+				onChange: (checked: boolean) => {
+					setAssigneeId(checked ? assignee.id : null);
+					setPage("1");
+				},
+				icon: <AssigneeAvatar assignee={assignee} />,
+			})),
+			maxHeight: "150px",
+		},
+	];
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterConfigs.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterConfigs.tsx
new file mode 100644
index 0000000000..7bec50c8fb
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/components/filterConfigs.tsx
@@ -0,0 +1,31 @@
+import { CheckCircle2, XCircle, AlertTriangle, Building } from "lucide-react";
+
+export const STATUS_FILTERS = [
+	{
+		label: "Published",
+		value: "published",
+		icon: <CheckCircle2 size={16} className="text-green-500" />,
+	},
+	{
+		label: "Draft",
+		value: "draft",
+		icon: <XCircle size={16} className="text-red-500" />,
+	},
+] as const;
+
+export const RELEVANCE_FILTERS = [
+	{
+		label: "Relevant",
+		value: "relevant",
+		icon: <CheckCircle2 size={16} className="text-green-500" />,
+	},
+	{
+		label: "Not Relevant",
+		value: "not-relevant",
+		icon: <AlertTriangle size={16} className="text-yellow-500" />,
+	},
+] as const;
+
+export const DEPARTMENT_ICON = (
+	<Building size={16} className="text-muted-foreground" />
+);
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
index 50bf9908cf..547a48df81 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
@@ -15,6 +15,7 @@ import { useOrganizationEvidenceTasks } from "../../hooks/useEvidenceTasks";
 import { ALL_DEPARTMENTS } from "../../constants";
 import { ALL_FREQUENCIES } from "../../constants";
 import type { EvidenceTaskRow } from "../components/table";
+import { useDebounce } from "../../../../../../../hooks/useDebounce";
 
 interface Assignee {
 	id: string;
@@ -22,9 +23,15 @@ interface Assignee {
 	image: string | null;
 }
 
+interface Filter {
+	label: string;
+	value: string;
+	checked: boolean;
+}
+
 interface EvidenceTableContextType {
 	// State
-	search: string | null;
+	search: string;
 	status: string | null;
 	frequency: string | null;
 	department: string | null;
@@ -32,9 +39,10 @@ interface EvidenceTableContextType {
 	relevance: string | null;
 	page: string;
 	pageSize: string;
+	filters: Filter[];
 
 	// Setters
-	setSearch: (value: string | null) => void;
+	setSearch: (value: string) => void;
 	setStatus: (value: string | null) => void;
 	setFrequency: (value: string | null) => void;
 	setDepartment: (value: string | null) => void;
@@ -42,6 +50,7 @@ interface EvidenceTableContextType {
 	setRelevance: (value: string | null) => void;
 	setPage: (value: string) => void;
 	setPageSize: (value: string) => void;
+	setFilters: (filters: Filter[]) => void;
 	mutate: () => void;
 
 	// Data
@@ -73,8 +82,11 @@ const EvidenceTableContext = createContext<
 >(undefined);
 
 export function EvidenceTableProvider({ children }: { children: ReactNode }) {
-	// Query state
-	const [search, setSearch] = useQueryState("search");
+	// Local state for search
+	const [search, setSearch] = useState("");
+	const debouncedSearch = useDebounce(search, 300);
+
+	// Query state for other filters
 	const [status, setStatus] = useQueryState("status");
 	const [frequency, setFrequency] = useQueryState("frequency");
 	const [department, setDepartment] = useQueryState("department");
@@ -85,6 +97,14 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		defaultValue: "10",
 	});
 
+	// Filter state
+	const [filters, setFilters] = useState<Filter[]>([
+		{ label: "Published", value: "published", checked: false },
+		{ label: "Draft", value: "draft", checked: false },
+		{ label: "Relevant", value: "relevant", checked: false },
+		{ label: "Not Relevant", value: "not-relevant", checked: false },
+	]);
+
 	// Track if this is initial load or a search/filter update
 	const initialLoadCompleted = useRef(false);
 	const [isSearching, setIsSearching] = useState(false);
@@ -100,7 +120,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		error,
 		mutate,
 	} = useOrganizationEvidenceTasks({
-		search,
+		search: debouncedSearch,
 		status: status as "published" | "draft" | null,
 		frequency: frequency as any,
 		department: department as any,
@@ -116,7 +136,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 			setIsSearching(true);
 		}
 	}, [
-		search,
+		debouncedSearch,
 		status,
 		frequency,
 		department,
@@ -205,10 +225,11 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		setAssigneeId(null);
 		setRelevance(null);
 		setPage("1"); // Reset to first page when clearing filters
+		setFilters(filters.map((f) => ({ ...f, checked: false }))); // Reset all filter checkboxes
+		setSearch(""); // Clear search
 	};
 
-	// Create context value including the new isSearching property
-	const contextValue = {
+	const contextValue: EvidenceTableContextType = {
 		// State
 		search,
 		status,
@@ -218,6 +239,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		relevance,
 		page,
 		pageSize,
+		filters,
 
 		// Setters
 		setSearch,
@@ -228,6 +250,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		setRelevance,
 		setPage,
 		setPageSize,
+		setFilters,
 		mutate,
 
 		// Data
diff --git a/apps/app/src/components/ui/data-table/DataTable.tsx b/apps/app/src/components/ui/data-table/DataTable.tsx
new file mode 100644
index 0000000000..21380cc13c
--- /dev/null
+++ b/apps/app/src/components/ui/data-table/DataTable.tsx
@@ -0,0 +1,292 @@
+"use client";
+
+import {
+	type Column,
+	flexRender,
+	getCoreRowModel,
+	useReactTable,
+	getSortedRowModel,
+	type SortingState,
+	type ColumnDef,
+} from "@tanstack/react-table";
+import { Table, TableBody, TableCell, TableRow } from "@bubba/ui/table";
+import { cn } from "@bubba/ui/cn";
+import { useState } from "react";
+import { DataTableHeader } from "./DataTableHeader";
+import { DataTablePagination } from "./DataTablePagination";
+import { Input } from "@bubba/ui/input";
+import { Button } from "@bubba/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuCheckboxItem,
+} from "@bubba/ui/dropdown-menu";
+import { Filter, Search, X } from "lucide-react";
+import { DataTableSkeleton } from "./DataTableSkeleton";
+import { Badge } from "@bubba/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@bubba/ui/avatar";
+
+interface FilterItem {
+	label: string;
+	value: string;
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+	icon?: React.ReactNode;
+}
+
+interface FilterCategory {
+	label: string;
+	items: FilterItem[];
+	maxHeight?: string;
+}
+
+interface DataTableProps<TData> {
+	data: TData[];
+	columns: ColumnDef<TData>[];
+	onRowClick?: (row: TData) => void;
+	className?: string;
+	emptyMessage?: string;
+	isLoading?: boolean;
+	pagination?: {
+		page: number;
+		pageSize: number;
+		totalCount: number;
+		totalPages: number;
+		hasNextPage: boolean;
+		hasPreviousPage: boolean;
+	};
+	onPageChange?: (page: number) => void;
+	onPageSizeChange?: (pageSize: number) => void;
+	search?: {
+		value: string;
+		onChange: (value: string) => void;
+		placeholder?: string;
+	};
+	filters?: {
+		categories: FilterCategory[];
+		hasActiveFilters: boolean;
+		onClearFilters: () => void;
+		activeFilterCount?: number;
+	};
+}
+
+export function DataTable<TData>({
+	data,
+	columns,
+	onRowClick,
+	className,
+	emptyMessage = "No data found.",
+	isLoading = false,
+	pagination,
+	onPageChange,
+	onPageSizeChange,
+	search,
+	filters,
+}: DataTableProps<TData>) {
+	const [sorting, setSorting] = useState<SortingState>([]);
+
+	const table = useReactTable({
+		data,
+		columns,
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		enableColumnResizing: true,
+		columnResizeMode: "onChange",
+		defaultColumn: {
+			minSize: 40,
+			size: 150,
+		},
+		state: {
+			sorting,
+		},
+		onSortingChange: setSorting,
+	});
+
+	return (
+		<div className="space-y-4">
+			{(search || filters) && (
+				<div className="flex items-center gap-3">
+					{search && (
+						<div className="w-full max-w-md">
+							<div className="relative">
+								<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+								<Input
+									placeholder={search.placeholder || "Search..."}
+									value={search.value}
+									onChange={(e) => search.onChange(e.target.value)}
+									className="pl-8 pr-8"
+								/>
+								{search.value && (
+									<Button
+										variant="ghost"
+										size="icon"
+										className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
+										onClick={() => search.onChange("")}
+									>
+										<X className="h-4 w-4 text-muted-foreground" />
+									</Button>
+								)}
+							</div>
+						</div>
+					)}
+					{filters && (
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="outline"
+									size="sm"
+									className={cn(
+										"h-9 px-3",
+										filters.hasActiveFilters && "border-primary",
+									)}
+								>
+									<Filter className="mr-2 h-4 w-4" />
+									Filters
+									{filters.hasActiveFilters && filters.activeFilterCount && (
+										<Badge variant="secondary" className="ml-2 px-1 py-0">
+											{filters.activeFilterCount}
+										</Badge>
+									)}
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								align="end"
+								className="w-[500px] max-w-[90vw]"
+							>
+								<div className="grid grid-cols-2 gap-4 p-2">
+									{filters.categories.map((category, index) => (
+										<div key={category.label}>
+											<DropdownMenuLabel>{category.label}</DropdownMenuLabel>
+											<div
+												className={cn(
+													"space-y-1",
+													category.maxHeight && "overflow-y-auto",
+													index < filters.categories.length - 1 && "mb-3",
+												)}
+												style={
+													category.maxHeight
+														? { maxHeight: category.maxHeight }
+														: undefined
+												}
+											>
+												{category.items.map((item) => (
+													<DropdownMenuCheckboxItem
+														key={item.value}
+														checked={item.checked}
+														onCheckedChange={item.onChange}
+													>
+														{item.icon ? (
+															<div className="flex items-center gap-2">
+																{item.icon}
+																<span>{item.label}</span>
+															</div>
+														) : (
+															item.label
+														)}
+													</DropdownMenuCheckboxItem>
+												))}
+											</div>
+										</div>
+									))}
+								</div>
+
+								{filters.hasActiveFilters && (
+									<div className="px-2 pb-2">
+										<DropdownMenuSeparator />
+										<Button
+											variant="ghost"
+											size="sm"
+											className="w-full justify-start text-sm font-normal mt-2"
+											onClick={filters.onClearFilters}
+										>
+											Clear all filters
+										</Button>
+									</div>
+								)}
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</div>
+			)}
+
+			<div className={cn("relative w-full border", className)}>
+				<div
+					className="overflow-x-auto"
+					style={{ WebkitOverflowScrolling: "touch" }}
+				>
+					<Table>
+						<DataTableHeader table={table} />
+						<TableBody>
+							{isLoading ? (
+								<TableRow>
+									<TableCell colSpan={columns.length} className="p-0">
+										<DataTableSkeleton columns={columns.length} rows={5} />
+									</TableCell>
+								</TableRow>
+							) : table.getRowModel().rows?.length ? (
+								table.getRowModel().rows.map((row) => (
+									<TableRow
+										key={row.id}
+										data-state={row.getIsSelected() && "selected"}
+										className={cn(
+											"hover:bg-muted/50",
+											onRowClick && "cursor-pointer",
+										)}
+										onClick={() => onRowClick?.(row.original)}
+									>
+										{row.getVisibleCells().map((cell) => (
+											<TableCell
+												key={cell.id}
+												className="p-4 relative whitespace-nowrap"
+												style={{ width: cell.column.getSize() }}
+											>
+												<div>
+													{flexRender(
+														cell.column.columnDef.cell,
+														cell.getContext(),
+													)}
+												</div>
+												<div
+													className={`absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-border opacity-0 hover:opacity-100 ${
+														table.getState().columnSizingInfo
+															.isResizingColumn === cell.column.id
+															? "bg-primary opacity-100"
+															: ""
+													}`}
+													onClick={(e) => {
+														// Stop propagation to prevent row click when resizing
+														e.stopPropagation();
+													}}
+												/>
+											</TableCell>
+										))}
+									</TableRow>
+								))
+							) : (
+								<TableRow>
+									<TableCell
+										colSpan={columns.length}
+										className="h-24 text-center"
+									>
+										{emptyMessage}
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</div>
+			</div>
+
+			{pagination && onPageChange && onPageSizeChange && (
+				<DataTablePagination
+					{...pagination}
+					onPageChange={onPageChange}
+					onPageSizeChange={onPageSizeChange}
+				/>
+			)}
+		</div>
+	);
+}
diff --git a/apps/app/src/components/ui/data-table/DataTableHeader.tsx b/apps/app/src/components/ui/data-table/DataTableHeader.tsx
new file mode 100644
index 0000000000..8fd5ca8c20
--- /dev/null
+++ b/apps/app/src/components/ui/data-table/DataTableHeader.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import type { Table } from "@tanstack/react-table";
+import { TableHead, TableHeader, TableRow } from "@bubba/ui/table";
+import { flexRender } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { cn } from "@bubba/ui/cn";
+
+interface DataTableHeaderProps<TData> {
+	table: Table<TData>;
+}
+
+export function DataTableHeader<TData>({ table }: DataTableHeaderProps<TData>) {
+	return (
+		<TableHeader>
+			{table.getHeaderGroups().map((headerGroup) => (
+				<TableRow key={headerGroup.id}>
+					{headerGroup.headers.map((header) => (
+						<TableHead
+							key={header.id}
+							className="p-4 relative whitespace-nowrap"
+							style={{ width: header.getSize() }}
+						>
+							{header.isPlaceholder ? null : (
+								<div
+									className={cn(
+										"flex items-center overflow-hidden",
+										header.column.getCanSort() && "cursor-pointer select-none",
+									)}
+									style={{ width: header.getSize() - 32 }}
+									onClick={header.column.getToggleSortingHandler()}
+								>
+									{flexRender(
+										header.column.columnDef.header,
+										header.getContext(),
+									)}
+									{{
+										asc: <ArrowUp className="ml-2 h-4 w-4" />,
+										desc: <ArrowDown className="ml-2 h-4 w-4" />,
+									}[header.column.getIsSorted() as string] ??
+										(header.column.getCanSort() && (
+											<ArrowUpDown className="ml-2 h-4 w-4 opacity-50" />
+										))}
+								</div>
+							)}
+							<div
+								onMouseDown={header.getResizeHandler()}
+								onTouchStart={header.getResizeHandler()}
+								className={`absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none bg-border opacity-0 hover:opacity-100 ${
+									table.getState().columnSizingInfo.isResizingColumn ===
+									header.column.id
+										? "bg-primary opacity-100"
+										: ""
+								}`}
+							/>
+						</TableHead>
+					))}
+				</TableRow>
+			))}
+		</TableHeader>
+	);
+}
diff --git a/apps/app/src/components/ui/data-table/DataTablePagination.tsx b/apps/app/src/components/ui/data-table/DataTablePagination.tsx
new file mode 100644
index 0000000000..4f8757ffda
--- /dev/null
+++ b/apps/app/src/components/ui/data-table/DataTablePagination.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Button } from "@bubba/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@bubba/ui/select";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface DataTablePaginationProps {
+	page: number;
+	pageSize: number;
+	totalCount: number;
+	totalPages: number;
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	onPageChange: (page: number) => void;
+	onPageSizeChange: (pageSize: number) => void;
+}
+
+export function DataTablePagination({
+	page,
+	pageSize,
+	totalCount,
+	totalPages,
+	hasNextPage,
+	hasPreviousPage,
+	onPageChange,
+	onPageSizeChange,
+}: DataTablePaginationProps) {
+	const handlePageSizeChange = (value: string) => {
+		onPageSizeChange(Number(value));
+		onPageChange(1); // Reset to first page when changing page size
+	};
+
+	return (
+		<div className="flex items-center justify-between">
+			<div className="text-sm text-muted-foreground">
+				{totalCount} {totalCount === 1 ? "item" : "items"}
+			</div>
+			<div className="flex items-center gap-2">
+				<Select
+					value={pageSize.toString()}
+					onValueChange={handlePageSizeChange}
+				>
+					<SelectTrigger className="h-8 w-[70px]">
+						<SelectValue placeholder={pageSize} />
+					</SelectTrigger>
+					<SelectContent side="top">
+						{[10, 20, 30, 40, 50].map((size) => (
+							<SelectItem key={size} value={size.toString()}>
+								{size}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => onPageChange(page - 1)}
+						disabled={!hasPreviousPage}
+					>
+						<ChevronLeft className="h-4 w-4" />
+					</Button>
+					<div className="text-sm font-medium">
+						Page {page} of {totalPages}
+					</div>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => onPageChange(page + 1)}
+						disabled={!hasNextPage}
+					>
+						<ChevronRight className="h-4 w-4" />
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/apps/app/src/components/ui/data-table/DataTableSkeleton.tsx b/apps/app/src/components/ui/data-table/DataTableSkeleton.tsx
new file mode 100644
index 0000000000..d17857f0b5
--- /dev/null
+++ b/apps/app/src/components/ui/data-table/DataTableSkeleton.tsx
@@ -0,0 +1,47 @@
+import { Skeleton } from "@bubba/ui/skeleton";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@bubba/ui/table";
+import { cn } from "@bubba/ui/cn";
+
+interface DataTableSkeletonProps {
+	columns?: number;
+	rows?: number;
+	className?: string;
+}
+
+export function DataTableSkeleton({
+	columns = 5,
+	rows = 5,
+	className,
+}: DataTableSkeletonProps) {
+	return (
+		<Table className={className}>
+			<TableHeader>
+				<TableRow>
+					{Array.from({ length: columns }).map((_, i) => (
+						<TableHead key={`skeleton-header-${i + 1}`}>
+							<Skeleton className="h-4 w-[200px]" />
+						</TableHead>
+					))}
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{Array.from({ length: rows }).map((_, i) => (
+					<TableRow key={`skeleton-row-${i + 1}`} className="h-[54px]">
+						{Array.from({ length: columns }).map((_, j) => (
+							<TableCell key={`skeleton-cell-${i + 1}-${j + 1}`}>
+								<Skeleton className="h-4 w-[150px]" />
+							</TableCell>
+						))}
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
+}
diff --git a/apps/app/src/components/ui/data-table/index.ts b/apps/app/src/components/ui/data-table/index.ts
new file mode 100644
index 0000000000..f2510fb8e6
--- /dev/null
+++ b/apps/app/src/components/ui/data-table/index.ts
@@ -0,0 +1,3 @@
+export { DataTable } from "./DataTable";
+export { DataTableHeader } from "./DataTableHeader";
+export { DataTableSkeleton } from "./DataTableSkeleton";
diff --git a/apps/app/src/hooks/useDebounce.ts b/apps/app/src/hooks/useDebounce.ts
new file mode 100644
index 0000000000..d39df3f066
--- /dev/null
+++ b/apps/app/src/hooks/useDebounce.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}

From 618fa8aaf75390276fb45d8aeaa637a00c750918 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Mon, 17 Mar 2025 12:02:47 -0400
Subject: [PATCH 5/8] policies table updated

---
 .../(overview)/components/PoliciesList.tsx    |  79 +--------
 .../components/table/PoliciesTable.tsx        |  88 ++++++++++
 .../(overview)/components/table/columns.tsx   |  75 ++++++++
 .../table/components/filterCategories.tsx     |  64 +++++++
 .../table/components/filterConfigs.tsx        |  24 +++
 .../table/hooks/usePoliciesTableContext.tsx   | 164 ++++++++++++++++++
 .../all/(overview)/components/table/types.ts  |  13 ++
 .../all/(overview)/components/table/utils.ts  |  18 ++
 .../all/(overview)/hooks/usePolicies.ts       |   5 +-
 .../components/ui/data-table/DataTable.tsx    |  15 ++
 10 files changed, 470 insertions(+), 75 deletions(-)
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/PoliciesTable.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/columns.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterCategories.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterConfigs.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/types.ts
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/utils.ts

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/PoliciesList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/PoliciesList.tsx
index 444c3b54fb..5bc0d540be 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/PoliciesList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/PoliciesList.tsx
@@ -1,7 +1,5 @@
 "use client";
 
-import type { PolicyType } from "@/components/tables/policies/columns";
-import { DataTable } from "@/components/tables/policies/data-table";
 import {
 	NoPolicies,
 	NoResults,
@@ -14,10 +12,10 @@ import { Button } from "@bubba/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card";
 import { AlertTriangle } from "lucide-react";
 import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { usePolicies } from "../hooks/usePolicies";
-import { PoliciesListSkeleton } from "./PoliciesListSkeleton";
 import type { User } from "next-auth";
+import { PoliciesListSkeleton } from "./PoliciesListSkeleton";
+import { PoliciesTable } from "./table/PoliciesTable";
+import { PoliciesTableProvider } from "./table/hooks/usePoliciesTableContext";
 
 interface PoliciesListProps {
 	columnHeaders: {
@@ -30,73 +28,12 @@ interface PoliciesListProps {
 
 export function PoliciesList({ columnHeaders, users }: PoliciesListProps) {
 	const t = useI18n();
-	const searchParams = useSearchParams();
-	const search = searchParams.get("search");
-	const status = searchParams.get("status");
-	const sort = searchParams.get("sort");
-	const pageSize = Number(searchParams.get("pageSize")) || 10;
-	const page = Number(searchParams.get("page")) || 1;
-
-	const { policies, total, isLoading, error } = usePolicies({
-		search: search || undefined,
-		status: status || undefined,
-		sort: sort || undefined,
-		page: page || 1,
-		pageSize: pageSize || 10,
-	});
-
-	if (isLoading) {
-		return <PoliciesListSkeleton />;
-	}
-
-	if (error) {
-		return (
-			<div className="p-6">
-				<Card>
-					<CardContent className="p-6 flex items-center gap-3">
-						<AlertTriangle className="text-red-500 h-5 w-5" />
-						<span>{error.message || t("common.errors.unexpected_error")}</span>
-					</CardContent>
-				</Card>
-			</div>
-		);
-	}
-
-	const hasFilters = !!(search || status || sort);
-
-	if (policies.length === 0 && !hasFilters) {
-		return (
-			<div className="relative overflow-hidden">
-				<div className="flex items-center justify-between mb-6">
-					<h1 className="text-2xl font-bold">{t("policies.title")}</h1>
-					<Link href="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/policies/new">
-						<Button>{t("policies.create_new")}</Button>
-					</Link>
-				</div>
-				<FilterToolbar isEmpty={true} users={users} />
-				<NoPolicies />
-				<Loading isEmpty />
-			</div>
-		);
-	}
 
 	return (
-		<div className="relative">
-			<FilterToolbar
-				isEmpty={policies.length === 0 && !hasFilters}
-				users={users}
-			/>
-
-			{policies.length > 0 ? (
-				<DataTable
-					columnHeaders={columnHeaders}
-					data={policies as unknown as PolicyType[]}
-					pageCount={Math.ceil(total / pageSize)}
-					currentPage={page}
-				/>
-			) : (
-				<NoResults hasFilters={hasFilters} />
-			)}
-		</div>
+		<PoliciesTableProvider>
+			<div className="relative">
+				<PoliciesTable users={users} />
+			</div>
+		</PoliciesTableProvider>
 	);
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/PoliciesTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/PoliciesTable.tsx
new file mode 100644
index 0000000000..6c87823857
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/PoliciesTable.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { DataTable } from "@/components/ui/data-table";
+import { useRouter } from "next/navigation";
+import { Plus } from "lucide-react";
+import { getFilterCategories } from "./components/filterCategories";
+import { getColumns } from "./columns";
+import type { PoliciesTableProps } from "./types";
+import { usePoliciesTable } from "./hooks/usePoliciesTableContext";
+
+export function PoliciesTable({ users }: PoliciesTableProps) {
+	const router = useRouter();
+	const {
+		page,
+		setPage,
+		pageSize,
+		setPageSize,
+		policies,
+		total,
+		search,
+		setSearch,
+		status,
+		setStatus,
+		ownerId,
+		setOwnerId,
+		hasActiveFilters,
+		clearFilters,
+		isLoading,
+		isSearching,
+	} = usePoliciesTable();
+
+	const handleRowClick = (policyId: string) => {
+		router.push(`/policies/all/${policyId}`);
+	};
+
+	const activeFilterCount = [status, ownerId].filter(Boolean).length;
+
+	const filterCategories = getFilterCategories({
+		status,
+		setStatus,
+		ownerId,
+		setOwnerId,
+		users,
+		setPage,
+	});
+
+	// Calculate pagination values only when total is defined
+	const pagination =
+		total !== undefined
+			? {
+					page: Number(page),
+					pageSize: Number(pageSize),
+					totalCount: total,
+					totalPages: Math.ceil(total / Number(pageSize)),
+					hasNextPage: Number(page) * Number(pageSize) < total,
+					hasPreviousPage: Number(page) > 1,
+				}
+			: undefined;
+
+	return (
+		<DataTable
+			data={policies || []}
+			columns={getColumns(handleRowClick)}
+			onRowClick={(row) => handleRowClick(row.id)}
+			emptyMessage="No policies found."
+			isLoading={isLoading || isSearching}
+			pagination={pagination}
+			onPageChange={(page) => setPage(page.toString())}
+			onPageSizeChange={(pageSize) => setPageSize(pageSize.toString())}
+			search={{
+				value: search || "",
+				onChange: setSearch,
+				placeholder: "Search policies...",
+			}}
+			filters={{
+				categories: filterCategories,
+				hasActiveFilters,
+				onClearFilters: clearFilters,
+				activeFilterCount,
+			}}
+			ctaButton={{
+				label: "Create Policy",
+				onClick: () => router.push("/policies/all/new"),
+				icon: <Plus className="h-4 w-4" />,
+			}}
+		/>
+	);
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/columns.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/columns.tsx
new file mode 100644
index 0000000000..0cb128ca71
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/columns.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import type { ColumnDef } from "@tanstack/react-table";
+import type { PolicyStatus } from "./types";
+import { formatStatus, getStatusStyle } from "./utils";
+
+interface PolicyRow {
+	id: string;
+	status: PolicyStatus;
+	createdAt: Date;
+	updatedAt: Date;
+	policy: {
+		id: string;
+		name: string;
+		description: string | null;
+		slug: string;
+	};
+}
+
+export function getColumns(
+	handleRowClick: (policyId: string) => void,
+): ColumnDef<PolicyRow>[] {
+	return [
+		{
+			id: "name",
+			header: "Name",
+			accessorKey: "policy.name",
+			cell: ({ row }) => {
+				const name = row.original.policy.name;
+				return (
+					<div className="flex flex-col gap-1">
+						<button
+							type="button"
+							className="text-left hover:underline"
+							onClick={() => handleRowClick(row.original.id)}
+						>
+							<span className="truncate">{name}</span>
+						</button>
+					</div>
+				);
+			},
+		},
+		{
+			id: "status",
+			header: "Status",
+			accessorKey: "status",
+			cell: ({ row }) => {
+				const status = row.original.status;
+				return (
+					<div className="hidden md:flex items-center gap-2">
+						<div className={`h-2.5 w-2.5 ${getStatusStyle(status)}`} />
+						<span className="text-sm">{formatStatus(status)}</span>
+					</div>
+				);
+			},
+		},
+		{
+			id: "updatedAt",
+			header: "Last Updated",
+			accessorKey: "updatedAt",
+			cell: ({ row }) => {
+				const date = new Date(row.original.updatedAt);
+				return (
+					<div className="text-muted-foreground">
+						{date.toLocaleDateString("en-US", {
+							year: "numeric",
+							month: "short",
+							day: "numeric",
+						})}
+					</div>
+				);
+			},
+		},
+	];
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterCategories.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterCategories.tsx
new file mode 100644
index 0000000000..ae8855fb53
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterCategories.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { STATUS_FILTERS } from "./filterConfigs";
+import type { User } from "next-auth";
+
+interface FilterCategoriesProps {
+	status: string | null;
+	setStatus: (status: string | null) => void;
+	ownerId: string | null;
+	setOwnerId: (ownerId: string | null) => void;
+	users: User[];
+	setPage: (page: string) => void;
+}
+
+export function getFilterCategories({
+	status,
+	setStatus,
+	ownerId,
+	setOwnerId,
+	users,
+	setPage,
+}: FilterCategoriesProps) {
+	return [
+		{
+			label: "Filter by Status",
+			items: STATUS_FILTERS.map((filter) => ({
+				...filter,
+				checked: status === filter.value,
+				onChange: (checked: boolean) => {
+					setStatus(checked ? filter.value : null);
+					setPage("1");
+				},
+			})),
+		},
+		{
+			label: "Filter by Owner",
+			items: users.map((user) => ({
+				label: user.name || "Unknown",
+				value: user.id || "",
+				checked: ownerId === user.id,
+				onChange: (checked: boolean) => {
+					setOwnerId(checked ? user.id || null : null);
+					setPage("1");
+				},
+				icon: (
+					<div className="h-5 w-5">
+						{user.image ? (
+							<img
+								src={user.image}
+								alt={user.name || "Unknown"}
+								className="h-5 w-5 rounded-full"
+							/>
+						) : (
+							<div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs">
+								{(user.name || "?").charAt(0)}
+							</div>
+						)}
+					</div>
+				),
+			})),
+			maxHeight: "150px",
+		},
+	];
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterConfigs.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterConfigs.tsx
new file mode 100644
index 0000000000..7d1a7d631d
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/components/filterConfigs.tsx
@@ -0,0 +1,24 @@
+import { CheckCircle2, XCircle, Archive, AlertTriangle } from "lucide-react";
+
+export const STATUS_FILTERS = [
+	{
+		label: "Published",
+		value: "published",
+		icon: <div className="h-2.5 w-2.5 bg-[#00DC73]" />,
+	},
+	{
+		label: "Draft",
+		value: "draft",
+		icon: <div className="h-2.5 w-2.5 bg-[#ffc107]" />,
+	},
+	{
+		label: "Needs Review",
+		value: "needs_review",
+		icon: <div className="h-2.5 w-2.5 bg-[#ff0000]" />,
+	},
+	{
+		label: "Archived",
+		value: "archived",
+		icon: <div className="h-2.5 w-2.5 bg-[#0ea5e9]" />,
+	},
+] as const;
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
new file mode 100644
index 0000000000..79c9750557
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
@@ -0,0 +1,164 @@
+"use client";
+
+import {
+	createContext,
+	useContext,
+	useMemo,
+	useState,
+	useRef,
+	useEffect,
+	type ReactNode,
+} from "react";
+import { useQueryState } from "nuqs";
+import { usePolicies } from "../../../hooks/usePolicies";
+import { useDebounce } from "@/hooks/useDebounce";
+
+interface PoliciesTableContextType {
+	// State
+	search: string;
+	status: string | null;
+	ownerId: string | null;
+	page: string;
+	pageSize: string;
+
+	// Setters
+	setSearch: (value: string) => void;
+	setStatus: (value: string | null) => void;
+	setOwnerId: (value: string | null) => void;
+	setPage: (value: string) => void;
+	setPageSize: (value: string) => void;
+
+	// Data
+	policies: any[] | undefined;
+	total: number | undefined;
+	isLoading: boolean;
+	isSearching: boolean;
+
+	// Derived data
+	hasActiveFilters: boolean;
+
+	// Actions
+	clearFilters: () => void;
+}
+
+const PoliciesTableContext = createContext<
+	PoliciesTableContextType | undefined
+>(undefined);
+
+export function PoliciesTableProvider({ children }: { children: ReactNode }) {
+	// Local state for search
+	const [search, setSearch] = useState("");
+	const debouncedSearch = useDebounce(search, 300);
+
+	// Query state for other filters
+	const [status, setStatus] = useQueryState("status");
+	const [ownerId, setOwnerId] = useQueryState("ownerId");
+	const [page, setPage] = useQueryState("page", { defaultValue: "1" });
+	const [pageSize, setPageSize] = useQueryState("pageSize", {
+		defaultValue: "10",
+	});
+
+	// Track if this is initial load or a search/filter update
+	const initialLoadCompleted = useRef(false);
+	const [isSearching, setIsSearching] = useState(false);
+
+	const currentPage = Number.parseInt(page, 10);
+	const currentPageSize = Number.parseInt(pageSize, 10);
+
+	// Fetch data
+	const { policies, total, isLoading } = usePolicies({
+		search: debouncedSearch,
+		status: status || undefined,
+		ownerId: ownerId || undefined,
+		page: currentPage,
+		pageSize: currentPageSize,
+	});
+
+	// Track when search params change
+	useEffect(() => {
+		if (initialLoadCompleted.current) {
+			setIsSearching(true);
+		}
+	}, [debouncedSearch, status, ownerId, page, pageSize]);
+
+	// Track when loading changes
+	useEffect(() => {
+		if (isLoading === false) {
+			// Small delay to ensure UI transitions properly
+			setTimeout(() => {
+				initialLoadCompleted.current = true;
+				setIsSearching(false);
+			}, 50);
+		}
+	}, [isLoading]);
+
+	// Additional safety reset for isSearching when data changes
+	useEffect(() => {
+		if (policies && isSearching) {
+			// If we have data, ensure isSearching is eventually set to false
+			const timer = setTimeout(() => {
+				setIsSearching(false);
+			}, 100);
+			return () => clearTimeout(timer);
+		}
+	}, [policies, isSearching]);
+
+	// Check if any filters are active
+	const hasActiveFilters = useMemo(() => {
+		return status !== null || ownerId !== null;
+	}, [status, ownerId]);
+
+	// Clear all filters
+	const clearFilters = () => {
+		setStatus(null);
+		setOwnerId(null);
+		setPage("1"); // Reset to first page when clearing filters
+		setSearch(""); // Clear search
+	};
+
+	const contextValue: PoliciesTableContextType = {
+		// State
+		search,
+		status,
+		ownerId,
+		page,
+		pageSize,
+
+		// Setters
+		setSearch,
+		setStatus,
+		setOwnerId,
+		setPage,
+		setPageSize,
+
+		// Data
+		policies,
+		total, // Use the total directly from the API
+		isLoading,
+		isSearching,
+
+		// Derived data
+		hasActiveFilters,
+
+		// Actions
+		clearFilters,
+	};
+
+	return (
+		<PoliciesTableContext.Provider value={contextValue}>
+			{children}
+		</PoliciesTableContext.Provider>
+	);
+}
+
+export function usePoliciesTable() {
+	const context = useContext(PoliciesTableContext);
+
+	if (context === undefined) {
+		throw new Error(
+			"usePoliciesTable must be used within a PoliciesTableProvider",
+		);
+	}
+
+	return context;
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/types.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/types.ts
new file mode 100644
index 0000000000..920374f603
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/types.ts
@@ -0,0 +1,13 @@
+import type { User } from "next-auth";
+import type { ReactNode } from "react";
+
+export type PolicyStatus = "published" | "draft" | "needs_review" | "archived";
+
+export interface PoliciesTableProps {
+  users: User[];
+  ctaButton?: {
+    label: string;
+    onClick: () => void;
+    icon?: ReactNode;
+  };
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/utils.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/utils.ts
new file mode 100644
index 0000000000..4715b718f4
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/utils.ts
@@ -0,0 +1,18 @@
+import type { PolicyStatus } from "./types";
+
+export function getStatusStyle(status: PolicyStatus) {
+  switch (status) {
+    case "published":
+      return "bg-[#00DC73]";
+    case "draft":
+      return "bg-[#ffc107]";
+    case "needs_review":
+      return "bg-[#ff0000]";
+    case "archived":
+      return "bg-[#0ea5e9]";
+  }
+}
+
+export function formatStatus(status: PolicyStatus) {
+  return status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, " ");
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/hooks/usePolicies.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/hooks/usePolicies.ts
index 35ee5c4078..4708df8ab7 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/hooks/usePolicies.ts
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/hooks/usePolicies.ts
@@ -1,10 +1,7 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
 import useSWR from "swr";
-
 import { getPolicies } from "../actions/get-policies";
-
 import type { AppError, PoliciesInput, PoliciesResponse } from "../types";
 
 async function fetchPolicies(input: PoliciesInput): Promise<PoliciesResponse> {
@@ -53,7 +50,7 @@ export function usePolicies({
 
   return {
     policies: data?.policies ?? [],
-    total: data?.total ?? 0,
+    total: data?.total,
     isLoading,
     error,
     revalidatePolicies,
diff --git a/apps/app/src/components/ui/data-table/DataTable.tsx b/apps/app/src/components/ui/data-table/DataTable.tsx
index 21380cc13c..009b49e8b4 100644
--- a/apps/app/src/components/ui/data-table/DataTable.tsx
+++ b/apps/app/src/components/ui/data-table/DataTable.tsx
@@ -71,6 +71,11 @@ interface DataTableProps<TData> {
 		onClearFilters: () => void;
 		activeFilterCount?: number;
 	};
+	ctaButton?: {
+		label: string;
+		onClick: () => void;
+		icon?: React.ReactNode;
+	};
 }
 
 export function DataTable<TData>({
@@ -85,6 +90,7 @@ export function DataTable<TData>({
 	onPageSizeChange,
 	search,
 	filters,
+	ctaButton,
 }: DataTableProps<TData>) {
 	const [sorting, setSorting] = useState<SortingState>([]);
 
@@ -209,6 +215,15 @@ export function DataTable<TData>({
 							</DropdownMenuContent>
 						</DropdownMenu>
 					)}
+					{ctaButton && (
+						<Button
+							className="ml-auto flex flex-row gap-2"
+							onClick={ctaButton.onClick}
+						>
+							{ctaButton.icon}
+							{ctaButton.label}
+						</Button>
+					)}
 				</div>
 			)}
 

From b5d3d51b8f3751a5b1aa64a4b4ee793398b86c44 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Mon, 17 Mar 2025 12:45:59 -0400
Subject: [PATCH 6/8] update employees table

---
 .../list/hooks/useEvidenceTableContext.tsx    |   6 +-
 .../people/actions/get-employees.ts           |   3 +-
 .../people/components/EmployeesList.tsx       |  77 +-----
 .../components/table/EmployeesTable.tsx       |  69 ++++++
 .../people/components/table/columns.tsx       |  63 +++++
 .../table/components/filterCategories.tsx     |  41 ++++
 .../table/hooks/useEmployeesTableContext.tsx  | 138 +++++++++++
 .../people/components/table/types.ts          |  34 +++
 .../(dashboard)/people/hooks/useEmployees.ts  |  22 +-
 .../(app)/(dashboard)/people/page.tsx         |  39 ++-
 .../(app)/(dashboard)/people/types.ts         |  44 ++++
 .../table/hooks/usePoliciesTableContext.tsx   |   6 +-
 .../components/sheets/invite-user-sheet.tsx   | 229 +++++++++---------
 .../components/tables/tests/empty-states.tsx  |  92 ++++---
 .../components/ui/data-table/DataTable.tsx    |  28 ++-
 15 files changed, 612 insertions(+), 279 deletions(-)
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/EmployeesTable.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/columns.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/components/filterCategories.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/hooks/useEmployeesTableContext.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/types.ts
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/people/types.ts

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
index 547a48df81..87821dc8ad 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/hooks/useEvidenceTableContext.tsx
@@ -15,7 +15,6 @@ import { useOrganizationEvidenceTasks } from "../../hooks/useEvidenceTasks";
 import { ALL_DEPARTMENTS } from "../../constants";
 import { ALL_FREQUENCIES } from "../../constants";
 import type { EvidenceTaskRow } from "../components/table";
-import { useDebounce } from "../../../../../../../hooks/useDebounce";
 
 interface Assignee {
 	id: string;
@@ -84,7 +83,6 @@ const EvidenceTableContext = createContext<
 export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 	// Local state for search
 	const [search, setSearch] = useState("");
-	const debouncedSearch = useDebounce(search, 300);
 
 	// Query state for other filters
 	const [status, setStatus] = useQueryState("status");
@@ -120,7 +118,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 		error,
 		mutate,
 	} = useOrganizationEvidenceTasks({
-		search: debouncedSearch,
+		search,
 		status: status as "published" | "draft" | null,
 		frequency: frequency as any,
 		department: department as any,
@@ -136,7 +134,7 @@ export function EvidenceTableProvider({ children }: { children: ReactNode }) {
 			setIsSearching(true);
 		}
 	}, [
-		debouncedSearch,
+		search,
 		status,
 		frequency,
 		department,
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/actions/get-employees.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/people/actions/get-employees.ts
index 823417ea8c..cb9abdc714 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/people/actions/get-employees.ts
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/actions/get-employees.ts
@@ -2,7 +2,8 @@
 
 import { db } from "@bubba/db";
 import { authActionClient } from "@/actions/safe-action";
-import { employeesInputSchema, appErrors } from "../types";
+import { employeesInputSchema } from "../types";
+import { appErrors } from "../types";
 
 export const getEmployees = authActionClient
   .schema(employeesInputSchema)
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/EmployeesList.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/EmployeesList.tsx
index ae6fc93280..61e82e9076 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/EmployeesList.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/EmployeesList.tsx
@@ -1,77 +1,12 @@
 "use client";
 
-import { DataTable } from "@/components/tables/people/data-table";
-import {
-	NoResults,
-	NoEmployees,
-} from "@/components/tables/people/empty-states";
-import { FilterToolbar } from "@/components/tables/people/filter-toolbar";
-import { Loading } from "@/components/tables/people/loading";
-import { useEmployees } from "../hooks/useEmployees";
-import { useSearchParams } from "next/navigation";
-import type { PersonType } from "@/components/tables/people/columns";
-import { EmployeesListSkeleton } from "./EmployeesListSkeleton";
-
-interface EmployeesListProps {
-	columnHeaders: {
-		name: string;
-		email: string;
-		department: string;
-		status: string;
-	};
-}
-
-export function EmployeesList({ columnHeaders }: EmployeesListProps) {
-	const searchParams = useSearchParams();
-	const search = searchParams.get("search");
-	const role = searchParams.get("role");
-	const per_page = Number(searchParams.get("per_page")) || 10;
-	const page = Number(searchParams.get("page")) || 1;
-
-	const { employees, total, isLoading, error } = useEmployees();
-
-	console.log({
-		employees,
-	});
-
-	if (isLoading) {
-		return <EmployeesListSkeleton />;
-	}
-
-	if (error) {
-		return (
-			<div className="relative">
-				<FilterToolbar isEmpty={true} />
-				<NoResults hasFilters={false} />
-			</div>
-		);
-	}
-
-	const hasFilters = !!(search || role);
-
-	if (employees.length === 0 && !hasFilters) {
-		return (
-			<div className="relative overflow-hidden">
-				<FilterToolbar isEmpty={true} />
-				<NoEmployees />
-				<Loading isEmpty />
-			</div>
-		);
-	}
+import { EmployeesTable } from "./table/EmployeesTable";
+import { EmployeesTableProvider } from "./table/hooks/useEmployeesTableContext";
 
+export function EmployeesList() {
 	return (
-		<div className="relative">
-			<FilterToolbar isEmpty={employees.length === 0} />
-			{employees.length > 0 ? (
-				<DataTable
-					columnHeaders={columnHeaders}
-					data={employees as PersonType[]}
-					pageCount={Math.ceil(total / per_page)}
-					currentPage={page}
-				/>
-			) : (
-				<NoResults hasFilters={hasFilters} />
-			)}
-		</div>
+		<EmployeesTableProvider>
+			<EmployeesTable />
+		</EmployeesTableProvider>
 	);
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/EmployeesTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/EmployeesTable.tsx
new file mode 100644
index 0000000000..0cb71c46c8
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/EmployeesTable.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { EmployeeInviteSheet } from "@/components/sheets/invite-user-sheet";
+import { DataTable } from "@/components/ui/data-table";
+import { Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useQueryState } from "nuqs";
+import { getColumns } from "./columns";
+import { useEmployeesTable } from "./hooks/useEmployeesTableContext";
+
+export function EmployeesTable() {
+	const router = useRouter();
+	const [, setInviteSheetOpen] = useQueryState("invite-user-sheet");
+	const {
+		page,
+		setPage,
+		per_page,
+		setPerPage,
+		employees,
+		total,
+		search,
+		setSearch,
+		isLoading,
+		isSearching,
+	} = useEmployeesTable();
+
+	const handleRowClick = (employeeId: string) => {
+		router.push(`/people/${employeeId}`);
+	};
+
+	// Calculate pagination values only when total is defined
+	const pagination =
+		total !== undefined
+			? {
+					page: Number(page),
+					pageSize: Number(per_page),
+					totalCount: total,
+					totalPages: Math.ceil(total / Number(per_page)),
+					hasNextPage: Number(page) * Number(per_page) < total,
+					hasPreviousPage: Number(page) > 1,
+				}
+			: undefined;
+
+	return (
+		<>
+			<DataTable
+				data={employees || []}
+				columns={getColumns(handleRowClick)}
+				onRowClick={(row) => handleRowClick(row.id)}
+				emptyMessage="No employees found."
+				isLoading={isLoading || isSearching}
+				pagination={pagination}
+				onPageChange={(page) => setPage(page)}
+				onPageSizeChange={(pageSize) => setPerPage(pageSize)}
+				search={{
+					value: search || "",
+					onChange: setSearch,
+					placeholder: "Search employees...",
+				}}
+				ctaButton={{
+					label: "Add Employee",
+					onClick: () => setInviteSheetOpen("true"),
+					icon: <Plus className="h-4 w-4" />,
+				}}
+			/>
+			<EmployeeInviteSheet />
+		</>
+	);
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/columns.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/columns.tsx
new file mode 100644
index 0000000000..6f5669899a
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/columns.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import {
+	EmployeeStatus,
+	getEmployeeStatusFromBoolean,
+} from "@/components/tables/people/employee-status";
+import type { Employee } from "@bubba/db";
+import { Avatar, AvatarFallback } from "@bubba/ui/avatar";
+import { Badge } from "@bubba/ui/badge";
+import type { ColumnDef } from "@tanstack/react-table";
+
+export function getColumns(
+	onRowClick: (id: string) => void,
+): ColumnDef<Employee>[] {
+	return [
+		{
+			accessorKey: "name",
+			header: "Name",
+			cell: ({ row }) => {
+				const employee = row.original;
+				return (
+					<div className="flex items-center gap-2">
+						<Avatar>
+							<AvatarFallback>{employee.name[0] || "?"}</AvatarFallback>
+						</Avatar>
+						<div>
+							<div className="font-medium">{employee.name}</div>
+							<div className="text-sm text-muted-foreground">
+								{employee.email}
+							</div>
+						</div>
+					</div>
+				);
+			},
+		},
+		{
+			accessorKey: "department",
+			header: "Department",
+			cell: ({ row }) => {
+				const department = row.getValue("department") as string;
+				return (
+					<Badge variant="marketing" className="w-fit">
+						{department.toUpperCase()}
+					</Badge>
+				);
+			},
+		},
+		{
+			accessorKey: "isActive",
+			header: "Status",
+			cell: ({ row }) => {
+				const isActive = row.original.isActive;
+				const status = getEmployeeStatusFromBoolean(isActive);
+
+				return (
+					<div className="hidden md:block">
+						<EmployeeStatus status={status} />
+					</div>
+				);
+			},
+		},
+	];
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/components/filterCategories.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/components/filterCategories.tsx
new file mode 100644
index 0000000000..0ee84c7583
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/components/filterCategories.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import type { FilterCategory } from "../types";
+
+interface GetFilterCategoriesProps {
+	role: string;
+	setRole: (value: string | null) => void;
+	setPage: (value: string) => void;
+}
+
+export function getFilterCategories({
+	role,
+	setRole,
+	setPage,
+}: GetFilterCategoriesProps): FilterCategory[] {
+	return [
+		{
+			label: "Role",
+			items: [
+				{
+					label: "Admin",
+					value: "admin",
+					checked: role === "admin",
+					onChange: (checked) => {
+						setRole(checked ? "admin" : null);
+						setPage("1");
+					},
+				},
+				{
+					label: "Member",
+					value: "member",
+					checked: role === "member",
+					onChange: (checked) => {
+						setRole(checked ? "member" : null);
+						setPage("1");
+					},
+				},
+			],
+		},
+	];
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/hooks/useEmployeesTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/hooks/useEmployeesTableContext.tsx
new file mode 100644
index 0000000000..735184a8f4
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/hooks/useEmployeesTableContext.tsx
@@ -0,0 +1,138 @@
+"use client";
+
+import {
+	createContext,
+	useContext,
+	useMemo,
+	useState,
+	useRef,
+	useEffect,
+	type ReactNode,
+} from "react";
+import { useQueryState } from "nuqs";
+import { useEmployees } from "../../../hooks/useEmployees";
+import type { AppError } from "../../../types";
+
+interface EmployeesTableContextType {
+	// State
+	search: string;
+	setSearch: (value: string) => void;
+	role: string;
+	setRole: (value: string) => void;
+	page: number;
+	setPage: (value: number) => void;
+	per_page: number;
+	setPerPage: (value: number) => void;
+	employees: any[];
+	total: number;
+	isLoading: boolean;
+	isSearching: boolean;
+	hasActiveFilters: boolean;
+
+	// Actions
+	clearFilters: () => void;
+}
+
+const EmployeesTableContext = createContext<
+	EmployeesTableContextType | undefined
+>(undefined);
+
+export function EmployeesTableProvider({ children }: { children: ReactNode }) {
+	// Local state for search with debounce
+	const [search, setSearch] = useState("");
+	const [debouncedSearch, setDebouncedSearch] = useState("");
+	const searchTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+
+	// Query state for filters
+	const [role, setRole] = useQueryState("role");
+	const [page, setPage] = useQueryState("page", { defaultValue: "1" });
+	const [per_page, setPerPage] = useQueryState("per_page", {
+		defaultValue: "10",
+	});
+
+	// Loading states
+	const [isSearching, setIsSearching] = useState(false);
+	const totalCountRef = useRef<number>(0);
+
+	// Fetch data
+	const { employees, total, isLoading, error } = useEmployees({
+		search: debouncedSearch,
+		role: role ?? "",
+		page: Number(page),
+		per_page: Number(per_page),
+	});
+
+	// Update debounced search
+	useEffect(() => {
+		setIsSearching(true);
+		if (searchTimeoutRef.current) {
+			clearTimeout(searchTimeoutRef.current);
+		}
+		searchTimeoutRef.current = setTimeout(() => {
+			setDebouncedSearch(search);
+			setIsSearching(false);
+		}, 300);
+
+		return () => {
+			if (searchTimeoutRef.current) {
+				clearTimeout(searchTimeoutRef.current);
+			}
+		};
+	}, [search]);
+
+	// Cache total count
+	useEffect(() => {
+		if (total !== undefined) {
+			totalCountRef.current = total;
+		}
+	}, [total]);
+
+	// Clear filters
+	const clearFilters = async () => {
+		setSearch("");
+		setRole(null);
+		setPage("1");
+		setPerPage("10");
+	};
+
+	// Calculate if there are active filters
+	const hasActiveFilters = useMemo(() => {
+		return Boolean(role);
+	}, [role]);
+
+	const value = {
+		// State
+		search,
+		setSearch,
+		role: role ?? "",
+		setRole: (value: string) => setRole(value || null),
+		page: Number(page),
+		setPage: (value: number) => setPage(String(value)),
+		per_page: Number(per_page),
+		setPerPage: (value: number) => setPerPage(String(value)),
+		employees,
+		total: totalCountRef.current,
+		isLoading,
+		isSearching,
+		hasActiveFilters,
+
+		// Actions
+		clearFilters,
+	};
+
+	return (
+		<EmployeesTableContext.Provider value={value}>
+			{children}
+		</EmployeesTableContext.Provider>
+	);
+}
+
+export function useEmployeesTable() {
+	const context = useContext(EmployeesTableContext);
+	if (!context) {
+		throw new Error(
+			"useEmployeesTable must be used within a EmployeesTableProvider",
+		);
+	}
+	return context;
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/types.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/types.ts
new file mode 100644
index 0000000000..16ef7e4f85
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/components/table/types.ts
@@ -0,0 +1,34 @@
+import type { User } from "@bubba/db";
+
+export interface EmployeesTableProps {
+  columnHeaders: {
+    name: string;
+    email: string;
+    department: string;
+    status: string;
+  };
+  users: Array<{
+    id: string;
+    name: string | null;
+    full_name: string | null;
+    email: string | null;
+    role: string;
+    onboarded: boolean;
+    emailVerified: Date | null;
+    image: string | null;
+    lastLogin: Date | null;
+    organizationId: string | null;
+  }>;
+}
+
+export interface FilterCategory {
+  label: string;
+  items: {
+    label: string;
+    value: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    icon?: React.ReactNode;
+  }[];
+  maxHeight?: string;
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees.ts
index 2058bef107..ff517512c7 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees.ts
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees.ts
@@ -35,14 +35,12 @@ async function fetchEmployees(
   return result.data?.data as EmployeesResponse;
 }
 
-export function useEmployees() {
-  const searchParams = useSearchParams();
-  const search = searchParams.get("search") || undefined;
-  const role = searchParams.get("role") || undefined;
-  const page = Number(searchParams.get("page")) || 1;
-  const per_page = Number(searchParams.get("per_page")) || 10;
-
-  /** SWR for fetching employees */
+export function useEmployees({
+  search = "",
+  role = "",
+  page = 1,
+  per_page = 10,
+}: EmployeesInput) {
   const {
     data,
     error,
@@ -52,8 +50,8 @@ export function useEmployees() {
     ["employees", { search, role, page, per_page }],
     () => fetchEmployees({ search, role, page, per_page }),
     {
-      revalidateOnFocus: true,
-      revalidateOnReconnect: true,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
     }
   );
 
@@ -106,13 +104,11 @@ export function useEmployees() {
 
   return {
     employees: data?.employees ?? [],
-    total: data?.total ?? 0,
+    total: data?.total,
     isLoading,
     isMutating, // <--- expose the mutation loader
     error,
-    /** Expose the revalidation if needed directly */
     revalidateEmployees,
-    /** Expose the create employee action */
     addEmployee,
   };
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/page.tsx
index f189e85333..99b308721d 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/people/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/page.tsx
@@ -1,5 +1,4 @@
 import { auth } from "@/auth";
-import { getServerColumnHeaders } from "@/components/tables/people/server-columns";
 import { getI18n } from "@/locales/server";
 import type { Metadata } from "next";
 import { setStaticParamsLocale } from "next-international/server";
@@ -7,36 +6,34 @@ import { redirect } from "next/navigation";
 import { EmployeesList } from "./components/EmployeesList";
 
 export default async function PeoplePage({
-  params,
+	params,
 }: {
-  params: Promise<{ locale: string }>;
+	params: Promise<{ locale: string }>;
 }) {
-  const { locale } = await params;
-  setStaticParamsLocale(locale);
+	const { locale } = await params;
+	setStaticParamsLocale(locale);
 
-  const session = await auth();
-  const organizationId = session?.user.organizationId;
+	const session = await auth();
+	const organizationId = session?.user.organizationId;
 
-  if (!organizationId) {
-    return redirect("/");
-  }
+	if (!organizationId) {
+		return redirect("/");
+	}
 
-  const columnHeaders = await getServerColumnHeaders();
-
-  return <EmployeesList columnHeaders={columnHeaders} />;
+	return <EmployeesList />;
 }
 
 export async function generateMetadata({
-  params,
+	params,
 }: {
-  params: Promise<{ locale: string }>;
+	params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
-  const { locale } = await params;
+	const { locale } = await params;
 
-  setStaticParamsLocale(locale);
-  const t = await getI18n();
+	setStaticParamsLocale(locale);
+	const t = await getI18n();
 
-  return {
-    title: t("sidebar.people"),
-  };
+	return {
+		title: t("sidebar.people"),
+	};
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/types.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/people/types.ts
new file mode 100644
index 0000000000..b43dc872a0
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/types.ts
@@ -0,0 +1,44 @@
+import { z } from "zod";
+
+export interface AppError {
+  code: string;
+  message: string;
+}
+
+export const appErrors = {
+  UNAUTHORIZED: {
+    code: "UNAUTHORIZED",
+    message: "You are not authorized to access this resource",
+  },
+  UNEXPECTED_ERROR: {
+    code: "UNEXPECTED_ERROR",
+    message: "An unexpected error occurred",
+  },
+};
+
+export interface EmployeesInput {
+  search?: string;
+  role?: string;
+  page?: number;
+  per_page?: number;
+}
+
+export const employeesInputSchema = z.object({
+  search: z.string().optional(),
+  role: z.string().optional(),
+  page: z.number().optional(),
+  per_page: z.number().optional(),
+});
+
+export interface EmployeesResponse {
+  employees: any[];
+  total: number;
+}
+
+export interface Employee {
+  id: string;
+  name: string;
+  email: string;
+  department: string;
+  status: string;
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
index 79c9750557..bcdfc1e17e 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/(overview)/components/table/hooks/usePoliciesTableContext.tsx
@@ -11,7 +11,6 @@ import {
 } from "react";
 import { useQueryState } from "nuqs";
 import { usePolicies } from "../../../hooks/usePolicies";
-import { useDebounce } from "@/hooks/useDebounce";
 
 interface PoliciesTableContextType {
 	// State
@@ -48,7 +47,6 @@ const PoliciesTableContext = createContext<
 export function PoliciesTableProvider({ children }: { children: ReactNode }) {
 	// Local state for search
 	const [search, setSearch] = useState("");
-	const debouncedSearch = useDebounce(search, 300);
 
 	// Query state for other filters
 	const [status, setStatus] = useQueryState("status");
@@ -67,7 +65,7 @@ export function PoliciesTableProvider({ children }: { children: ReactNode }) {
 
 	// Fetch data
 	const { policies, total, isLoading } = usePolicies({
-		search: debouncedSearch,
+		search,
 		status: status || undefined,
 		ownerId: ownerId || undefined,
 		page: currentPage,
@@ -79,7 +77,7 @@ export function PoliciesTableProvider({ children }: { children: ReactNode }) {
 		if (initialLoadCompleted.current) {
 			setIsSearching(true);
 		}
-	}, [debouncedSearch, status, ownerId, page, pageSize]);
+	}, [search, status, ownerId, page, pageSize]);
 
 	// Track when loading changes
 	useEffect(() => {
diff --git a/apps/app/src/components/sheets/invite-user-sheet.tsx b/apps/app/src/components/sheets/invite-user-sheet.tsx
index 733a12f19d..9f3ac2df40 100644
--- a/apps/app/src/components/sheets/invite-user-sheet.tsx
+++ b/apps/app/src/components/sheets/invite-user-sheet.tsx
@@ -6,19 +6,19 @@ import { Button } from "@bubba/ui/button";
 import { Input } from "@bubba/ui/input";
 import { Label } from "@bubba/ui/label";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@bubba/ui/select";
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetTitle,
 } from "@bubba/ui/sheet";
 import type { Departments } from "@prisma/client";
 import { useQueryState } from "nuqs";
@@ -26,115 +26,120 @@ import { useState } from "react";
 import { toast } from "sonner";
 
 const DEPARTMENTS: Departments[] = [
-  "none",
-  "admin",
-  "gov",
-  "hr",
-  "it",
-  "itsm",
-  "qms",
+	"none",
+	"admin",
+	"gov",
+	"hr",
+	"it",
+	"itsm",
+	"qms",
 ];
 
-export function InviteUserSheet() {
-  const t = useI18n();
-  const [open, setOpen] = useQueryState("invite-user-sheet");
-  const [email, setEmail] = useState("");
-  const [department, setDepartment] = useState<Departments>("none");
-  const [name, setName] = useState("");
-  const { addEmployee, isMutating } = useEmployees();
+export function EmployeeInviteSheet() {
+	const t = useI18n();
+	const [open, setOpen] = useQueryState("invite-user-sheet");
+	const [email, setEmail] = useState("");
+	const [department, setDepartment] = useState<Departments>("none");
+	const [name, setName] = useState("");
+	const { addEmployee, isMutating } = useEmployees({
+		search: "",
+		role: "",
+		page: 1,
+		per_page: 10,
+	});
 
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
 
-    try {
-      await addEmployee({
-        name,
-        email: email.trim(),
-        department,
-      });
+		try {
+			await addEmployee({
+				name,
+				email: email.trim(),
+				department,
+			});
 
-      toast.success(t("people.invite.success"));
-      setOpen(null);
-    } catch (error) {
-      toast.error(t("errors.unexpected"));
-    }
-  };
+			toast.success(t("people.invite.success"));
+			setOpen(null);
+		} catch (error) {
+			toast.error(t("errors.unexpected"));
+		}
+	};
 
-  return (
-    <Sheet
-      open={open === "true"}
-      onOpenChange={(open) => setOpen(open ? "true" : null)}
-    >
-      <SheetContent>
-        <form onSubmit={handleSubmit}>
-          <SheetHeader>
-            <SheetTitle>{t("people.invite.title")}</SheetTitle>
-            <SheetDescription>
-              {t("people.invite.description")}
-            </SheetDescription>
-          </SheetHeader>
+	return (
+		<Sheet
+			open={open === "true"}
+			onOpenChange={(open) => setOpen(open ? "true" : null)}
+		>
+			<SheetContent>
+				<form onSubmit={handleSubmit}>
+					<SheetHeader>
+						<SheetTitle>{t("people.invite.title")}</SheetTitle>
+						<SheetDescription>
+							{t("people.invite.description")}
+						</SheetDescription>
+					</SheetHeader>
 
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="name">{t("people.invite.name.label")}</Label>
-              <Input
-                id="name"
-                placeholder={t("people.invite.name.placeholder")}
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                required
-              />
-            </div>
+					<div className="grid gap-4 py-4">
+						<div className="grid gap-2">
+							<Label htmlFor="name">{t("people.invite.name.label")}</Label>
+							<Input
+								id="name"
+								placeholder={t("people.invite.name.placeholder")}
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								required
+							/>
+						</div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="email">{t("people.invite.email.label")}</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder={t("people.invite.email.placeholder")}
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
+						<div className="grid gap-2">
+							<Label htmlFor="email">{t("people.invite.email.label")}</Label>
+							<Input
+								id="email"
+								type="email"
+								placeholder={t("people.invite.email.placeholder")}
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								required
+							/>
+						</div>
 
-            <div className="grid gap-2">
-              <Label htmlFor="department">
-                {t("people.invite.department.label")}
-              </Label>
-              <Select
-                value={department}
-                onValueChange={(value) => setDepartment(value as Departments)}
-              >
-                <SelectTrigger id="department">
-                  <SelectValue
-                    placeholder={t("people.invite.department.placeholder")}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {DEPARTMENTS.map((dept) => (
-                    <SelectItem key={dept} value={dept}>
-                      {dept.toUpperCase()}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
+						<div className="grid gap-2">
+							<Label htmlFor="department">
+								{t("people.invite.department.label")}
+							</Label>
+							<Select
+								value={department}
+								onValueChange={(value) => setDepartment(value as Departments)}
+							>
+								<SelectTrigger id="department">
+									<SelectValue
+										placeholder={t("people.invite.department.placeholder")}
+									/>
+								</SelectTrigger>
+								<SelectContent>
+									{DEPARTMENTS.map((dept) => (
+										<SelectItem key={dept} value={dept}>
+											{dept.toUpperCase()}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					</div>
 
-          <SheetFooter>
-            <Button
-              type="submit"
-              disabled={isMutating || !email.trim()}
-              isLoading={isMutating}
-            >
-              {isMutating
-                ? t("people.invite.submit")
-                : t("people.invite.submit")}
-            </Button>
-          </SheetFooter>
-        </form>
-      </SheetContent>
-    </Sheet>
-  );
+					<SheetFooter>
+						<Button
+							type="submit"
+							disabled={isMutating || !email.trim()}
+							isLoading={isMutating}
+						>
+							{isMutating
+								? t("people.invite.submit")
+								: t("people.invite.submit")}
+						</Button>
+					</SheetFooter>
+				</form>
+			</SheetContent>
+		</Sheet>
+	);
 }
diff --git a/apps/app/src/components/tables/tests/empty-states.tsx b/apps/app/src/components/tables/tests/empty-states.tsx
index 6c3eac90d3..98b1e2d252 100644
--- a/apps/app/src/components/tables/tests/empty-states.tsx
+++ b/apps/app/src/components/tables/tests/empty-states.tsx
@@ -1,62 +1,60 @@
 "use client";
 
+import { EmployeeInviteSheet } from "@/components/sheets/invite-user-sheet";
 import { useI18n } from "@/locales/client";
 import { Button } from "@bubba/ui/button";
 import { CloudOff } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useQueryState } from "nuqs";
-import { InviteUserSheet } from "@/components/sheets/invite-user-sheet";
-import { Plus } from "lucide-react";
 
 interface Props {
-  hasFilters?: boolean;
+	hasFilters?: boolean;
 }
 
 export function NoResults({ hasFilters }: Props) {
-  const router = useRouter();
-  const t = useI18n();
-
-  return (
-    <div className="mt-24 flex items-center justify-center">
-      <div className="flex flex-col items-center">
-        <CloudOff className="mb-4 h-12 w-12 text-muted-foreground" />
-        <div className="text-center mb-6 space-y-2">
-          <h2 className="font-medium text-lg">
-            {t("tests.empty.no_results.title")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {hasFilters
-              ? t("tests.empty.no_results.description_with_filters")
-              : t("tests.empty.no_results.description")}
-          </p>
-        </div>
-
-        {hasFilters && (
-          <Button variant="outline" onClick={() => router.push("/tests")}>
-            {t("tests.actions.clear")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
+	const router = useRouter();
+	const t = useI18n();
+
+	return (
+		<div className="mt-24 flex items-center justify-center">
+			<div className="flex flex-col items-center">
+				<CloudOff className="mb-4 h-12 w-12 text-muted-foreground" />
+				<div className="text-center mb-6 space-y-2">
+					<h2 className="font-medium text-lg">
+						{t("tests.empty.no_results.title")}
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						{hasFilters
+							? t("tests.empty.no_results.description_with_filters")
+							: t("tests.empty.no_results.description")}
+					</p>
+				</div>
+
+				{hasFilters && (
+					<Button variant="outline" onClick={() => router.push("/tests")}>
+						{t("tests.actions.clear")}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
 }
 
 export function NoTests() {
-  const t = useI18n();
-
-  return (
-    <div className="mt-24 absolute w-full top-0 left-0 flex items-center justify-center z-20">
-      <div className="text-center max-w-sm mx-auto flex flex-col items-center justify-center">
-        <CloudOff className="mb-4 h-12 w-12 text-muted-foreground" />
-        <h2 className="text-xl font-medium mb-2">
-          {t("tests.empty.no_tests.title")}
-        </h2>
-        <p className="text-sm text-muted-foreground mb-6">
-          {t("tests.empty.no_tests.description")}
-        </p>
-      </div>
-
-      <InviteUserSheet />
-    </div>
-  );
+	const t = useI18n();
+
+	return (
+		<div className="mt-24 absolute w-full top-0 left-0 flex items-center justify-center z-20">
+			<div className="text-center max-w-sm mx-auto flex flex-col items-center justify-center">
+				<CloudOff className="mb-4 h-12 w-12 text-muted-foreground" />
+				<h2 className="text-xl font-medium mb-2">
+					{t("tests.empty.no_tests.title")}
+				</h2>
+				<p className="text-sm text-muted-foreground mb-6">
+					{t("tests.empty.no_tests.description")}
+				</p>
+			</div>
+
+			<EmployeeInviteSheet />
+		</div>
+	);
 }
diff --git a/apps/app/src/components/ui/data-table/DataTable.tsx b/apps/app/src/components/ui/data-table/DataTable.tsx
index 009b49e8b4..bc62929b4f 100644
--- a/apps/app/src/components/ui/data-table/DataTable.tsx
+++ b/apps/app/src/components/ui/data-table/DataTable.tsx
@@ -11,7 +11,7 @@ import {
 } from "@tanstack/react-table";
 import { Table, TableBody, TableCell, TableRow } from "@bubba/ui/table";
 import { cn } from "@bubba/ui/cn";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { DataTableHeader } from "./DataTableHeader";
 import { DataTablePagination } from "./DataTablePagination";
 import { Input } from "@bubba/ui/input";
@@ -93,6 +93,18 @@ export function DataTable<TData>({
 	ctaButton,
 }: DataTableProps<TData>) {
 	const [sorting, setSorting] = useState<SortingState>([]);
+	const [searchValue, setSearchValue] = useState(search?.value || "");
+
+	// Internal debounced search
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			search?.onChange(searchValue);
+		}, 300);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [searchValue, search]);
 
 	const table = useReactTable({
 		data,
@@ -111,6 +123,10 @@ export function DataTable<TData>({
 		onSortingChange: setSorting,
 	});
 
+	// Only show pagination when we have valid data and total count
+	const showPagination =
+		pagination && data.length > 0 && pagination.totalCount > 0;
+
 	return (
 		<div className="space-y-4">
 			{(search || filters) && (
@@ -121,16 +137,16 @@ export function DataTable<TData>({
 								<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
 								<Input
 									placeholder={search.placeholder || "Search..."}
-									value={search.value}
-									onChange={(e) => search.onChange(e.target.value)}
+									value={searchValue}
+									onChange={(e) => setSearchValue(e.target.value)}
 									className="pl-8 pr-8"
 								/>
-								{search.value && (
+								{searchValue && (
 									<Button
 										variant="ghost"
 										size="icon"
 										className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
-										onClick={() => search.onChange("")}
+										onClick={() => setSearchValue("")}
 									>
 										<X className="h-4 w-4 text-muted-foreground" />
 									</Button>
@@ -295,7 +311,7 @@ export function DataTable<TData>({
 				</div>
 			</div>
 
-			{pagination && onPageChange && onPageSizeChange && (
+			{showPagination && onPageChange && onPageSizeChange && (
 				<DataTablePagination
 					{...pagination}
 					onPageChange={onPageChange}

From 99cf8cd67a2bd5119f20d1823599fdb88731ec83 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Mon, 17 Mar 2025 17:40:11 -0400
Subject: [PATCH 7/8] update risk table

---
 .../risk/register/RiskRegisterTable.tsx       |  129 +
 .../risk/register/actions/getRisks.ts         |   64 +
 .../components/table/RiskRegisterColumns.tsx  |   56 +
 .../components/table/RiskRegisterFilters.tsx  |   73 +
 .../risk/register/hooks/useRisks.ts           |   61 +
 .../(app)/(dashboard)/risk/register/page.tsx  |  200 +-
 .../forms/risks/create-risk-form.tsx          |  515 ++--
 apps/app/src/components/status.tsx            |   15 +-
 apps/app/src/locales/en.ts                    | 2182 ++++++++---------
 9 files changed, 1763 insertions(+), 1532 deletions(-)
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/RiskRegisterTable.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/actions/getRisks.ts
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterColumns.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterFilters.tsx
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/hooks/useRisks.ts

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/RiskRegisterTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/RiskRegisterTable.tsx
new file mode 100644
index 0000000000..9be3e4a96d
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/RiskRegisterTable.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { DataTable } from "@/components/ui/data-table";
+import { useRisks } from "./hooks/useRisks";
+import { columns } from "./components/table/RiskRegisterColumns";
+import type { User, Risk, Departments } from "@bubba/db";
+import type { RiskStatus } from "@bubba/db";
+import { useState } from "react";
+import { useQueryState } from "nuqs";
+import { RiskRegisterFilters } from "./components/table/RiskRegisterFilters";
+import { useOrganizationAdmins } from "../../evidence/[id]/hooks/useOrganizationAdmins";
+import { CreateRiskSheet } from "@/components/sheets/create-risk-sheet";
+import { Plus } from "lucide-react";
+import { useI18n } from "@/locales/client";
+
+type RiskRegisterTableRow = Risk & { owner: User | null };
+
+export const RiskRegisterTable = () => {
+	const t = useI18n();
+	// State
+	const [search, setSearch] = useState("");
+	const [open, setOpen] = useQueryState("create-risk-sheet");
+
+	const [page, setPage] = useQueryState("page", {
+		defaultValue: 1,
+		parse: Number.parseInt,
+	});
+	const [pageSize, setPageSize] = useQueryState("pageSize", {
+		defaultValue: 10,
+		parse: Number,
+	});
+	const [status, setStatus] = useQueryState<RiskStatus | null>("status", {
+		defaultValue: null,
+		parse: (value) => value as RiskStatus | null,
+	});
+	const [department, setDepartment] = useQueryState<Departments | null>(
+		"department",
+		{
+			defaultValue: null,
+			parse: (value) => value as Departments | null,
+		},
+	);
+	const [assigneeId, setAssigneeId] = useQueryState<string | null>(
+		"assigneeId",
+		{
+			defaultValue: null,
+			parse: (value) => value,
+		},
+	);
+
+	const { data, isLoading } = useRisks({
+		search: search,
+		page: Number(page),
+		pageSize: Number(pageSize),
+		status,
+		department,
+		assigneeId,
+	});
+
+	const hasActiveFilters = Boolean(status || department || assigneeId);
+
+	const handleClearFilters = () => {
+		setStatus(null);
+		setDepartment(null);
+		setAssigneeId(null);
+		setPage(1);
+	};
+
+	const departments: Departments[] = [
+		"none",
+		"it",
+		"hr",
+		"admin",
+		"gov",
+		"itsm",
+		"qms",
+	] as const;
+
+	const { data: admins } = useOrganizationAdmins();
+
+	const filterCategories = RiskRegisterFilters({
+		setPage: (newPage: number) => setPage(newPage),
+		departments: departments,
+		assignees: admins || [],
+		status,
+		setStatus,
+		department,
+		setDepartment,
+		assigneeId,
+		setAssigneeId,
+	});
+
+	return (
+		<>
+			<DataTable<RiskRegisterTableRow>
+				columns={columns}
+				data={data}
+				isLoading={isLoading}
+				search={{
+					value: search,
+					onChange: setSearch,
+				}}
+				pagination={{
+					page: Number(page),
+					pageSize: Number(pageSize),
+					totalCount: data.length,
+					totalPages: Math.ceil(data.length / Number(pageSize)),
+					hasNextPage: Number(page) < Math.ceil(data.length / Number(pageSize)),
+					hasPreviousPage: Number(page) > 1,
+				}}
+				onPageChange={(newPage) => setPage(newPage)}
+				onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
+				filters={{
+					categories: filterCategories,
+					hasActiveFilters,
+					onClearFilters: handleClearFilters,
+					activeFilterCount: [status, department, assigneeId].filter(Boolean)
+						.length,
+				}}
+				ctaButton={{
+					label: t("risk.register.empty.create_risk"),
+					onClick: () => setOpen("true"),
+					icon: <Plus className="h-4 w-4 mr-2" />,
+				}}
+			/>
+			<CreateRiskSheet />
+		</>
+	);
+};
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/actions/getRisks.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/actions/getRisks.ts
new file mode 100644
index 0000000000..f7c9fcdc30
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/actions/getRisks.ts
@@ -0,0 +1,64 @@
+"use server";
+
+import { authActionClient } from "@/actions/safe-action";
+import { db, Departments, RiskStatus, Prisma } from "@bubba/db";
+import { z } from "zod";
+
+export const getRisks = authActionClient
+  .schema(
+    z.object({
+      search: z.string().optional(),
+      page: z.number().optional().default(1),
+      pageSize: z.number().optional().default(10),
+      status: z.nativeEnum(RiskStatus).nullable().optional(),
+      department: z.nativeEnum(Departments).nullable().optional(),
+      assigneeId: z.string().nullable().optional(),
+    })
+  )
+  .metadata({
+    name: "get-risks",
+    track: {
+      event: "get-risks",
+      channel: "server",
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { search, page, pageSize, status, department, assigneeId } =
+      parsedInput;
+    const { user } = ctx;
+
+    if (!user.organizationId) {
+      return {
+        success: false,
+        error: "Unauthorized",
+      };
+    }
+
+    const where = {
+      organizationId: user.organizationId,
+      ...(search && {
+        title: {
+          contains: search,
+          mode: Prisma.QueryMode.insensitive,
+        },
+      }),
+      ...(status ? { status } : {}),
+      ...(department ? { department } : {}),
+      ...(assigneeId ? { ownerId: assigneeId } : {}),
+    };
+
+    const skip = (page - 1) * (pageSize ?? 10);
+
+    const risks = await db.risk.findMany({
+      where,
+      skip,
+      take: pageSize,
+      include: {
+        owner: true,
+      },
+    });
+
+    return {
+      data: risks,
+    };
+  });
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterColumns.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterColumns.tsx
new file mode 100644
index 0000000000..2a4fdf67ca
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterColumns.tsx
@@ -0,0 +1,56 @@
+import type { Risk, User } from "@bubba/db";
+import type { ColumnDef } from "@tanstack/react-table";
+import { Badge } from "@bubba/ui/badge";
+import Link from "next/link";
+import { Avatar, AvatarFallback, AvatarImage } from "@bubba/ui/avatar";
+import { Status } from "@/components/status";
+
+export const columns: ColumnDef<Risk & { owner: User | null }>[] = [
+	{
+		header: "Risk",
+		accessorKey: "title",
+		cell: ({ row }) => {
+			return (
+				<Link href={`/risk/${row.original.id}`}>{row.original.title}</Link>
+			);
+		},
+	},
+	{
+		header: "Status",
+		accessorKey: "status",
+		cell: ({ row }) => {
+			return <Status status={row.original.status} />;
+		},
+	},
+	{
+		header: "Department",
+		accessorKey: "department",
+		cell: ({ row }) => {
+			return (
+				<Badge variant="marketing" className="uppercase w-fit">
+					{row.original.department}
+				</Badge>
+			);
+		},
+	},
+	{
+		header: "Assignee",
+		accessorKey: "assignee",
+		cell: ({ row }) => {
+			return (
+				<div className="flex items-center gap-2">
+					<Avatar className="h-8 w-8">
+						<AvatarImage
+							src={row.original.owner?.image || undefined}
+							alt={row.original.owner?.name || ""}
+						/>
+						<AvatarFallback>
+							{row.original.owner?.name?.charAt(0) || "?"}
+						</AvatarFallback>
+					</Avatar>
+					<p className="text-sm font-medium">{row.original.owner?.name}</p>
+				</div>
+			);
+		},
+	},
+];
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterFilters.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterFilters.tsx
new file mode 100644
index 0000000000..6fcf096418
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/components/table/RiskRegisterFilters.tsx
@@ -0,0 +1,73 @@
+import { AssigneeAvatar } from "../../../../evidence/list/components/table/components/AssigneeAvatar";
+import type { Departments, User } from "@bubba/db";
+import { RiskStatus } from "@bubba/db";
+import { Status } from "@/components/status";
+import type { Admin } from "../../../../evidence/[id]/hooks/useOrganizationAdmins";
+
+export const RiskRegisterFilters = ({
+	setPage,
+	departments,
+	assignees,
+	status,
+	setStatus,
+	department,
+	setDepartment,
+	assigneeId,
+	setAssigneeId,
+}: {
+	setPage: (page: number) => void;
+	departments: Departments[];
+	assignees: Admin[] | undefined;
+	status: RiskStatus | null;
+	setStatus: (status: RiskStatus | null) => void;
+	department: Departments | null;
+	setDepartment: (department: Departments | null) => void;
+	assigneeId: string | null;
+	setAssigneeId: (assigneeId: string | null) => void;
+}) => {
+	return [
+		{
+			label: "Filter by Status",
+			items: Object.values(RiskStatus).map((filter) => ({
+				label: filter
+					.split(" ")
+					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+					.join(" "),
+				icon: <Status status={filter} noLabel />,
+				value: filter,
+				checked: status === filter,
+				onChange: (checked: boolean) => {
+					setStatus(checked ? filter : null);
+					setPage(1);
+				},
+			})),
+		},
+		{
+			label: "Filter by Department",
+			items: departments.map((dept) => ({
+				label: dept.replace(/_/g, " ").toUpperCase(),
+				value: dept,
+				checked: department === dept,
+				onChange: (checked: boolean) => {
+					setDepartment(checked ? dept : null);
+					setPage(1);
+				},
+			})),
+			maxHeight: "150px",
+		},
+		{
+			label: "Filter by Assignee",
+			items: (assignees || []).map((assignee) => ({
+				label: assignee.name || "Unknown",
+				value: assignee.id,
+				checked: assigneeId === assignee.id,
+				onChange: (checked: boolean) => {
+					setAssigneeId(checked ? assignee.id : null);
+					setPage(1);
+				},
+				icon: <AssigneeAvatar assignee={assignee} />,
+			})),
+			maxHeight: "150px",
+		},
+	];
+};
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/hooks/useRisks.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/hooks/useRisks.ts
new file mode 100644
index 0000000000..610fe539d2
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/hooks/useRisks.ts
@@ -0,0 +1,61 @@
+import useSWR from "swr";
+import { getRisks } from "../actions/getRisks";
+import type { Departments, RiskStatus, Risk, User } from "@bubba/db";
+
+const fetchRisks = async (input: {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  status?: RiskStatus | null;
+  department?: Departments | null;
+  assigneeId?: string | null;
+}) => {
+  const response = await getRisks(input);
+
+  if (!response) {
+    throw new Error("Failed to fetch risks");
+  }
+
+  if (response.serverError) {
+    throw new Error(response.serverError);
+  }
+
+  if (response.validationErrors) {
+    throw new Error(
+      response.validationErrors._errors?.join(", ") ||
+        "Validation error occurred"
+    );
+  }
+
+  return response.data?.data;
+};
+
+export const useRisks = ({
+  search = "",
+  page = 1,
+  pageSize = 10,
+  status,
+  department,
+  assigneeId,
+}: {
+  search?: string;
+  page?: number;
+  pageSize?: number;
+  status?: RiskStatus | null;
+  department?: Departments | null;
+  assigneeId?: string | null;
+}) => {
+  const { data, isLoading, error, mutate } = useSWR(
+    ["risks", search, page, pageSize, status, department, assigneeId],
+    () =>
+      fetchRisks({ search, page, pageSize, status, department, assigneeId }),
+    {
+      revalidateOnFocus: true,
+      revalidateOnReconnect: true,
+      revalidateOnMount: true,
+      revalidateIfStale: true,
+    }
+  );
+
+  return { data: data || [], isLoading, error, mutate };
+};
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/page.tsx
index 4181aff8f3..249725e8e6 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/page.tsx
@@ -1,198 +1,22 @@
-import { auth } from "@/auth";
-import {
-  type RiskRegisterType,
-  columns,
-} from "@/components/tables/risk-register/columns";
-import { DataTable } from "@/components/tables/risk-register/data-table";
-import {
-  NoResults,
-  NoRisks,
-} from "@/components/tables/risk-register/empty-states";
-import { FilterToolbar } from "@/components/tables/risk-register/filter-toolbar";
-import { Loading } from "@/components/tables/risk-register/loading";
-import { getServerColumnHeaders } from "@/components/tables/risk-register/server-columns";
-import { getI18n } from "@/locales/server";
-import { type Departments, type RiskStatus, db } from "@bubba/db";
+import { RiskRegisterTable } from "./RiskRegisterTable";
 import type { Metadata } from "next";
+import { getI18n } from "@/locales/server";
 import { setStaticParamsLocale } from "next-international/server";
-import { unstable_cache } from "next/cache";
-import { redirect } from "next/navigation";
-
-export default async function RiskRegisterPage({
-  searchParams,
-}: {
-  params: Promise<{ locale: string }>;
-  searchParams: Promise<{
-    search?: string;
-    category?: string;
-    status?: string;
-    department?: string;
-    sort?: string;
-    page?: string;
-    per_page?: string;
-  }>;
-}) {
-  const session = await auth();
-  const organizationId = session?.user.organizationId;
-  const columnHeaders = await getServerColumnHeaders();
-
-  if (!organizationId) {
-    return redirect("/");
-  }
-
-  const {
-    search,
-    status,
-    department,
-    sort,
-    page = "1",
-    per_page = "10",
-  } = await searchParams;
-
-  const [column, order] = sort?.split(":") ?? [];
 
-  const hasFilters = !!(search || status || department);
-
-  const { risks: loadedRisks, total } = await getRisks({
-    organizationId,
-    search,
-    status: status as RiskStatus,
-    department: department as Departments,
-    column,
-    order,
-    page: Number.parseInt(page),
-    per_page: Number.parseInt(per_page),
-  });
-
-  const users = await db.user.findMany({
-    where: {
-      organizationId,
-      Risk: {
-        some: {},
-      },
-    },
-    select: {
-      id: true,
-      name: true,
-    },
-  });
-
-  if (loadedRisks.length === 0 && !hasFilters) {
-    return (
-      <div className="relative overflow-hidden">
-        <FilterToolbar isEmpty={true} users={users} />
-        <NoRisks />
-        <Loading isEmpty />
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative">
-      <FilterToolbar isEmpty={loadedRisks.length === 0} users={users} />
-      {loadedRisks.length > 0 ? (
-        <DataTable
-          columnHeaders={columnHeaders}
-          data={loadedRisks as RiskRegisterType[]}
-          pageCount={Math.ceil(total / Number.parseInt(per_page))}
-          currentPage={Number.parseInt(page)}
-        />
-      ) : (
-        <NoResults hasFilters={hasFilters} />
-      )}
-    </div>
-  );
+export default function RiskRegisterPage() {
+	return <RiskRegisterTable />;
 }
 
-const getRisks = unstable_cache(
-  async function risks({
-    organizationId,
-    search,
-    status,
-    department,
-    column,
-    order,
-    page = 1,
-    per_page = 10,
-  }: {
-    organizationId: string;
-    search?: string;
-    status?: RiskStatus;
-    department?: Departments;
-    column?: string;
-    order?: string;
-    page?: number;
-    per_page?: number;
-  }) {
-    const skip = (page - 1) * per_page;
-
-    const [risks, total] = await Promise.all([
-      db.risk.findMany({
-        where: {
-          organizationId,
-          AND: [
-            search
-              ? {
-                  OR: [
-                    { title: { contains: search, mode: "insensitive" } },
-                    { description: { contains: search, mode: "insensitive" } },
-                  ],
-                }
-              : {},
-            status ? { status } : {},
-            department ? { department } : {},
-          ],
-        },
-        orderBy: column
-          ? {
-              [column]: order === "asc" ? "asc" : "desc",
-            }
-          : undefined,
-        skip,
-        take: per_page,
-        include: {
-          owner: {
-            select: {
-              name: true,
-              image: true,
-            },
-          },
-        },
-      }),
-      db.risk.count({
-        where: {
-          organizationId,
-          AND: [
-            search
-              ? {
-                  OR: [
-                    { title: { contains: search, mode: "insensitive" } },
-                    { description: { contains: search, mode: "insensitive" } },
-                  ],
-                }
-              : {},
-            status ? { status } : {},
-            department ? { department } : {},
-          ],
-        },
-      }),
-    ]);
-
-    return { risks, total };
-  },
-  ["risks-cache"],
-);
-
 export async function generateMetadata({
-  params,
+	params,
 }: {
-  params: Promise<{ locale: string }>;
+	params: Promise<{ locale: string }>;
 }): Promise<Metadata> {
-  const { locale } = await params;
-  setStaticParamsLocale(locale);
-  const t = await getI18n();
+	const { locale } = await params;
+	setStaticParamsLocale(locale);
+	const t = await getI18n();
 
-  return {
-    title: t("sub_pages.risk.register"),
-  };
+	return {
+		title: t("sub_pages.risk.register"),
+	};
 }
diff --git a/apps/app/src/components/forms/risks/create-risk-form.tsx b/apps/app/src/components/forms/risks/create-risk-form.tsx
index 32a384870d..7ef8cc9c0c 100644
--- a/apps/app/src/components/forms/risks/create-risk-form.tsx
+++ b/apps/app/src/components/forms/risks/create-risk-form.tsx
@@ -1,284 +1,307 @@
 "use client";
 
-import { getOrganizationUsersAction } from "@/actions/organization/get-organization-users-action";
 import { createRiskAction } from "@/actions/risk/create-risk-action";
 import { createRiskSchema } from "@/actions/schema";
+import { useOrganizationAdmins } from "@/app/[locale]/(app)/(dashboard)/evidence/[id]/hooks/useOrganizationAdmins";
+import { useRisks } from "@/app/[locale]/(app)/(dashboard)/risk/register/hooks/useRisks";
 import { SelectUser } from "@/components/select-user";
 import { useI18n } from "@/locales/client";
 import { Departments, RiskCategory } from "@bubba/db";
+import type { RiskStatus } from "@bubba/db";
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
 } from "@bubba/ui/accordion";
 import { Button } from "@bubba/ui/button";
 import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
 } from "@bubba/ui/form";
 import { Input } from "@bubba/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@bubba/ui/select";
 import { Textarea } from "@bubba/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ArrowRightIcon } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import { useQueryState } from "nuqs";
-import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import type { z } from "zod";
+import { mutate } from "swr";
 
 interface User {
-  id: string;
-  image?: string | null;
-  name: string | null;
+	id: string;
+	image?: string | null;
+	name: string | null;
 }
 
 export function CreateRisk() {
-  const t = useI18n();
+	const t = useI18n();
 
-  const [users, setUsers] = useState<User[]>([]);
-  const [isLoadingUsers, setIsLoadingUsers] = useState(true);
-  const [_, setCreateRiskSheet] = useQueryState("create-risk-sheet");
+	// Get the same query parameters as the table
+	const [search] = useQueryState("search");
+	const [page] = useQueryState("page", {
+		defaultValue: 1,
+		parse: Number.parseInt,
+	});
+	const [pageSize] = useQueryState("pageSize", {
+		defaultValue: 10,
+		parse: Number,
+	});
+	const [status] = useQueryState<RiskStatus | null>("status", {
+		defaultValue: null,
+		parse: (value) => value as RiskStatus | null,
+	});
+	const [department] = useQueryState<Departments | null>("department", {
+		defaultValue: null,
+		parse: (value) => value as Departments | null,
+	});
+	const [assigneeId] = useQueryState<string | null>("assigneeId", {
+		defaultValue: null,
+		parse: (value) => value,
+	});
 
-  useEffect(() => {
-    async function loadUsers() {
-      const result = await getOrganizationUsersAction();
-      if (result?.data?.success && result?.data?.data) {
-        setUsers(result.data.data);
-      }
-      setIsLoadingUsers(false);
-    }
+	const { mutate: mutateRisks } = useRisks({
+		search: search || "",
+		page: Number(page),
+		pageSize: Number(pageSize),
+		status,
+		department,
+		assigneeId,
+	});
 
-    loadUsers();
-  }, []);
+	const { data: admins, isLoading: isLoadingAdmins } = useOrganizationAdmins();
+	const [_, setCreateRiskSheet] = useQueryState("create-risk-sheet");
 
-  const createRisk = useAction(createRiskAction, {
-    onSuccess: () => {
-      toast.success(t("risk.form.create_risk_success"));
-      setCreateRiskSheet(null);
-    },
-    onError: () => {
-      toast.error(t("risk.form.create_risk_error"));
-    },
-  });
+	const createRisk = useAction(createRiskAction, {
+		onSuccess: async () => {
+			toast.success(t("risk.form.create_risk_success"));
+			setCreateRiskSheet(null);
+			// Force invalidate and revalidate the risks list
+			await mutateRisks();
+		},
+		onError: () => {
+			toast.error(t("risk.form.create_risk_error"));
+		},
+	});
 
-  const form = useForm<z.infer<typeof createRiskSchema>>({
-    resolver: zodResolver(createRiskSchema),
-    defaultValues: {
-      title: "",
-      description: "",
-      category: RiskCategory.operations,
-      department: Departments.admin,
-    },
-  });
+	const form = useForm<z.infer<typeof createRiskSchema>>({
+		resolver: zodResolver(createRiskSchema),
+		defaultValues: {
+			title: "",
+			description: "",
+			category: RiskCategory.operations,
+			department: Departments.admin,
+		},
+	});
 
-  const onSubmit = (data: z.infer<typeof createRiskSchema>) => {
-    createRisk.execute(data);
-  };
+	const onSubmit = (data: z.infer<typeof createRiskSchema>) => {
+		createRisk.execute(data);
+	};
 
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
-          <div>
-            <Accordion type="multiple" defaultValue={["risk"]}>
-              <AccordionItem value="risk">
-                <AccordionTrigger>
-                  {t("risk.form.risk_details")}
-                </AccordionTrigger>
-                <AccordionContent>
-                  <div className="space-y-4">
-                    <FormField
-                      control={form.control}
-                      name="title"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t("risk.form.risk_title")}</FormLabel>
-                          <FormControl>
-                            <Input
-                              {...field}
-                              autoFocus
-                              className="mt-3"
-                              placeholder={t(
-                                "risk.form.risk_title_description",
-                              )}
-                              autoCorrect="off"
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      control={form.control}
-                      name="description"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t("risk.form.risk_description")}
-                          </FormLabel>
-                          <FormControl>
-                            <Textarea
-                              {...field}
-                              className="mt-3 min-h-[80px]"
-                              placeholder={t(
-                                "risk.form.risk_description_description",
-                              )}
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      control={form.control}
-                      name="category"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t("risk.form.risk_category")}</FormLabel>
-                          <FormControl>
-                            <Select
-                              {...field}
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue
-                                  placeholder={t(
-                                    "risk.form.risk_category_placeholder",
-                                  )}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {Object.values(RiskCategory).map((category) => {
-                                  const formattedCategory = category
-                                    .toLowerCase()
-                                    .split("_")
-                                    .map(
-                                      (word) =>
-                                        word.charAt(0).toUpperCase() +
-                                        word.slice(1),
-                                    )
-                                    .join(" ");
-                                  return (
-                                    <SelectItem key={category} value={category}>
-                                      {formattedCategory}
-                                    </SelectItem>
-                                  );
-                                })}
-                              </SelectContent>
-                            </Select>
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      control={form.control}
-                      name="department"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>
-                            {t("risk.form.risk_department")}
-                          </FormLabel>
-                          <FormControl>
-                            <Select
-                              {...field}
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue
-                                  placeholder={t(
-                                    "risk.form.risk_department_placeholder",
-                                  )}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {Object.values(Departments).map(
-                                  (department) => {
-                                    const formattedDepartment =
-                                      department.toUpperCase();
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)}>
+				<div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
+					<div>
+						<Accordion type="multiple" defaultValue={["risk"]}>
+							<AccordionItem value="risk">
+								<AccordionTrigger>
+									{t("risk.form.risk_details")}
+								</AccordionTrigger>
+								<AccordionContent>
+									<div className="space-y-4">
+										<FormField
+											control={form.control}
+											name="title"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>{t("risk.form.risk_title")}</FormLabel>
+													<FormControl>
+														<Input
+															{...field}
+															autoFocus
+															className="mt-3"
+															placeholder={t(
+																"risk.form.risk_title_description",
+															)}
+															autoCorrect="off"
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="description"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>
+														{t("risk.form.risk_description")}
+													</FormLabel>
+													<FormControl>
+														<Textarea
+															{...field}
+															className="mt-3 min-h-[80px]"
+															placeholder={t(
+																"risk.form.risk_description_description",
+															)}
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="category"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>{t("risk.form.risk_category")}</FormLabel>
+													<FormControl>
+														<Select
+															{...field}
+															value={field.value}
+															onValueChange={field.onChange}
+														>
+															<SelectTrigger>
+																<SelectValue
+																	placeholder={t(
+																		"risk.form.risk_category_placeholder",
+																	)}
+																/>
+															</SelectTrigger>
+															<SelectContent>
+																{Object.values(RiskCategory).map((category) => {
+																	const formattedCategory = category
+																		.toLowerCase()
+																		.split("_")
+																		.map(
+																			(word) =>
+																				word.charAt(0).toUpperCase() +
+																				word.slice(1),
+																		)
+																		.join(" ");
+																	return (
+																		<SelectItem key={category} value={category}>
+																			{formattedCategory}
+																		</SelectItem>
+																	);
+																})}
+															</SelectContent>
+														</Select>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="department"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>
+														{t("risk.form.risk_department")}
+													</FormLabel>
+													<FormControl>
+														<Select
+															{...field}
+															value={field.value}
+															onValueChange={field.onChange}
+														>
+															<SelectTrigger>
+																<SelectValue
+																	placeholder={t(
+																		"risk.form.risk_department_placeholder",
+																	)}
+																/>
+															</SelectTrigger>
+															<SelectContent>
+																{Object.values(Departments).map(
+																	(department) => {
+																		const formattedDepartment =
+																			department.toUpperCase();
 
-                                    return (
-                                      <SelectItem
-                                        key={department}
-                                        value={department}
-                                      >
-                                        {formattedDepartment}
-                                      </SelectItem>
-                                    );
-                                  },
-                                )}
-                              </SelectContent>
-                            </Select>
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                    <FormField
-                      control={form.control}
-                      name="ownerId"
-                      render={({ field }) => (
-                        <FormItem>
-                          <FormLabel>{t("common.assignee.label")}</FormLabel>
-                          <FormControl>
-                            <Select
-                              value={field.value}
-                              onValueChange={field.onChange}
-                            >
-                              <SelectTrigger>
-                                <SelectValue
-                                  placeholder={t("common.assignee.placeholder")}
-                                />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectUser
-                                  users={users}
-                                  isLoading={isLoadingUsers}
-                                  onSelect={field.onChange}
-                                  selectedId={field.value}
-                                />
-                              </SelectContent>
-                            </Select>
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      )}
-                    />
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </div>
+																		return (
+																			<SelectItem
+																				key={department}
+																				value={department}
+																			>
+																				{formattedDepartment}
+																			</SelectItem>
+																		);
+																	},
+																)}
+															</SelectContent>
+														</Select>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+										<FormField
+											control={form.control}
+											name="ownerId"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>{t("common.assignee.label")}</FormLabel>
+													<FormControl>
+														<Select
+															value={field.value}
+															onValueChange={field.onChange}
+														>
+															<SelectTrigger>
+																<SelectValue
+																	placeholder={t("common.assignee.placeholder")}
+																/>
+															</SelectTrigger>
+															<SelectContent>
+																<SelectUser
+																	users={admins || []}
+																	isLoading={isLoadingAdmins}
+																	onSelect={field.onChange}
+																	selectedId={field.value}
+																/>
+															</SelectContent>
+														</Select>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
 
-          <div className="flex justify-end mt-4">
-            <Button
-              type="submit"
-              variant="action"
-              disabled={createRisk.status === "executing"}
-            >
-              <div className="flex items-center justify-center">
-                {t("common.actions.create")}
-                <ArrowRightIcon className="ml-2 h-4 w-4" />
-              </div>
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Form>
-  );
+					<div className="flex justify-end mt-4">
+						<Button
+							type="submit"
+							variant="action"
+							disabled={createRisk.status === "executing"}
+						>
+							<div className="flex items-center justify-center">
+								{t("common.actions.create")}
+								<ArrowRightIcon className="ml-2 h-4 w-4" />
+							</div>
+						</Button>
+					</div>
+				</div>
+			</form>
+		</Form>
+	);
 }
diff --git a/apps/app/src/components/status.tsx b/apps/app/src/components/status.tsx
index 0188d658a0..62d832894e 100644
--- a/apps/app/src/components/status.tsx
+++ b/apps/app/src/components/status.tsx
@@ -1,20 +1,21 @@
 import { useI18n } from "@/locales/client";
 import { cn } from "@bubba/ui/cn";
 
-export const STATUS_TYPES = ["open", "pending", "closed"] as const;
+export const STATUS_TYPES = ["open", "pending", "closed", "archived"] as const;
 
-export type StatusType = Exclude<
-	(typeof STATUS_TYPES)[number],
-	"draft" | "published"
->;
+export type StatusType = (typeof STATUS_TYPES)[number];
 
 const STATUS_COLORS: Record<StatusType, string> = {
 	open: "#ffc107",
 	pending: "#0ea5e9",
 	closed: "#00DC73",
+	archived: "#64748b",
 } as const;
 
-export function Status({ status }: { status: StatusType }) {
+export function Status({
+	status,
+	noLabel,
+}: { status: StatusType; noLabel?: boolean }) {
 	const t = useI18n();
 
 	return (
@@ -23,7 +24,7 @@ export function Status({ status }: { status: StatusType }) {
 				className={cn("size-2.5")}
 				style={{ backgroundColor: STATUS_COLORS[status] ?? "  " }}
 			/>
-			{t(`common.status.${status}`)}
+			{!noLabel && t(`common.status.${status}`)}
 		</div>
 	);
 }
diff --git a/apps/app/src/locales/en.ts b/apps/app/src/locales/en.ts
index dd25b312c0..82d00b69a8 100644
--- a/apps/app/src/locales/en.ts
+++ b/apps/app/src/locales/en.ts
@@ -1,1094 +1,1094 @@
 export default {
-	language: {
-		title: "Languages",
-		description: "Change the language used in the user interface.",
-		placeholder: "Select language",
-	},
-	languages: {
-		en: "English",
-		es: "Spanish",
-		fr: "French",
-		no: "Norwegian",
-		pt: "Portuguese",
-	},
-	common: {
-		frequency: {
-			daily: "Daily",
-			weekly: "Weekly",
-			monthly: "Monthly",
-			quarterly: "Quarterly",
-			yearly: "Yearly",
-		},
-		notifications: {
-			inbox: "Inbox",
-			archive: "Archive",
-			archive_all: "Archive all",
-			no_notifications: "No new notifications",
-		},
-		actions: {
-			save: "Save",
-			edit: "Edit",
-			delete: "Delete",
-			cancel: "Cancel",
-			clear: "Clear",
-			create: "Create",
-			addNew: "Add New",
-			send: "Send",
-			return: "Return",
-			success: "Success",
-			error: "Error",
-			next: "Next",
-			complete: "Complete",
-		},
-		assignee: {
-			label: "Assignee",
-			placeholder: "Select assignee",
-		},
-		date: {
-			pick: "Pick a date",
-			due_date: "Due Date",
-		},
-		status: {
-			open: "Open",
-			pending: "Pending",
-			closed: "Closed",
-			archived: "Archived",
-			compliant: "Compliant",
-			non_compliant: "Non Compliant",
-			not_started: "Not Started",
-			in_progress: "In Progress",
-			published: "Published",
-			needs_review: "Needs Review",
-			draft: "Draft",
-			not_assessed: "Not Assessed",
-			assessed: "Assessed",
-			active: "Active",
-			inactive: "Inactive",
-			title: "Status",
-		},
-		filters: {
-			clear: "Clear filters",
-			search: "Search...",
-			status: "Status",
-			department: "Department",
-			owner: {
-				label: "Assignee",
-				placeholder: "Filter by assignee",
-			},
-		},
-		table: {
-			title: "Title",
-			status: "Status",
-			assigned_to: "Assigned To",
-			due_date: "Due Date",
-			last_updated: "Last Updated",
-			no_results: "No results found",
-		},
-		empty_states: {
-			no_results: {
-				title: "No results found",
-				title_tasks: "No tasks found",
-				title_risks: "No risks found",
-				description: "Try another search, or adjusting the filters",
-				description_filters: "Try another search, or adjusting the filters",
-				description_no_tasks: "Create a task to get started",
-				description_no_risks: "Create a risk to get started",
-			},
-			no_items: {
-				title: "No items found",
-				description: "Try adjusting your search or filters",
-			},
-		},
-		pagination: {
-			of: "of",
-			items_per_page: "Items per page",
-			rows_per_page: "Rows per page",
-			page_x_of_y: "Page {{current}} of {{total}}",
-			go_to_first_page: "Go to first page",
-			go_to_previous_page: "Go to previous page",
-			go_to_next_page: "Go to next page",
-			go_to_last_page: "Go to last page",
-		},
-		comments: {
-			title: "Comments",
-			description: "Add a comment using the form below.",
-			add: "New Comment",
-			new: "New Comment",
-			save: "Save Comment",
-			success: "Comment added successfully",
-			error: "Failed to add comment",
-			placeholder: "Write your comment here...",
-			empty: {
-				title: "No comments yet",
-				description: "Be the first to add a comment",
-			},
-		},
-		upload: {
-			fileUpload: {
-				uploadingText: "Uploading...",
-				uploadingFile: "Uploading file...",
-				dropFileHere: "Drop file here",
-				dropFileHereAlt: "Drop file here",
-				releaseToUpload: "Release to upload",
-				addFiles: "Add Files",
-				uploadAdditionalEvidence: "Upload a file or document",
-				dragDropOrClick: "Drag and drop or click to browse",
-				dragDropOrClickToSelect: "Drag and drop or click to select file",
-				maxFileSize: "Max file size: {size}MB",
-			},
-			fileUrl: {
-				additionalLinks: "Additional Links",
-				add: "Add",
-				linksAdded: "{count} link{s} added",
-				enterUrl: "Enter URL",
-				addAnotherLink: "Add Another Link",
-				saveLinks: "Save Links",
-				urlBadge: "URL",
-				copyLink: "Copy Link",
-				openLink: "Open Link",
-				deleteLink: "Delete Link",
-			},
-			fileCard: {
-				preview: "Preview",
-				filePreview: "File Preview: {fileName}",
-				previewNotAvailable: "Preview not available for this file type",
-				openFile: "Open File",
-				deleteFile: "Delete File",
-				deleteFileConfirmTitle: "Delete File",
-				deleteFileConfirmDescription:
-					"This action cannot be undone. The file will be permanently deleted.",
-			},
-			fileSection: {
-				filesUploaded: "{count} files uploaded",
-			},
-		},
-		attachments: {
-			title: "Attachments",
-			description: "Add a file by clicking 'Add Attachment'.",
-			upload: "Upload attachment",
-			upload_description:
-				"Upload an attachment or add a link to an external resource.",
-			drop: "Drop the files here",
-			drop_description:
-				"Drop files here or click to choose files from your device.",
-			drop_files_description: "Files can be up to ",
-			empty: {
-				title: "No attachments",
-				description: "Add a file by clicking 'Add Attachment'.",
-			},
-			toasts: {
-				error: "Something went wrong, please try again.",
-				error_uploading_files: "Cannot upload more than 1 file at a time",
-				error_uploading_files_multiple: "Cannot upload more than 10 files",
-				error_no_files_selected: "No files selected",
-				error_file_rejected: "File {file} was rejected",
-				error_failed_to_upload_files: "Failed to upload files",
-				error_failed_to_upload_files_multiple: "Failed to upload files",
-				error_failed_to_upload_files_single: "Failed to upload file",
-				success_uploading_files: "Files uploaded successfully",
-				success_uploading_files_multiple: "Files uploaded successfully",
-				success_uploading_files_single: "File uploaded successfully",
-				success_uploading_files_target: "Files uploaded",
-				uploading_files: "Uploading {target}...",
-				remove_file: "Remove file",
-			},
-		},
-		edit: "Edit",
-		errors: {
-			unexpected_error: "An unexpected error occurred",
-		},
-		description: "Description",
-		last_updated: "Last Updated",
-	},
-	header: {
-		discord: {
-			button: "Join us on Discord",
-		},
-		feedback: {
-			button: "Feedback",
-			title: "Thank you for your feedback!",
-			description: "We will be back with you as soon as possible",
-			placeholder: "Ideas to improve this page or issues you are experiencing.",
-			success: "Thank you for your feedback!",
-			error: "Error sending feedback - try again?",
-			send: "Send Feedback",
-		},
-	},
-	not_found: {
-		title: "404 - Page not found",
-		description: "The page you are looking for does not exist.",
-		return: "Return to dashboard",
-	},
-	theme: {
-		options: {
-			light: "Light",
-			dark: "Dark",
-			system: "System",
-		},
-	},
-	sidebar: {
-		overview: "Overview",
-		policies: "Policies",
-		risk: "Risk Management",
-		vendors: "Vendors",
-		integrations: "Integrations",
-		settings: "Settings",
-		evidence: "Evidence Tasks",
-		people: "People",
-		tests: "Cloud Tests",
-	},
-	sub_pages: {
-		evidence: {
-			title: "Evidence",
-			list: "Evidence List",
-			overview: "Evidence Overview",
-		},
-		risk: {
-			overview: "Risk Management",
-			register: "Risk Register",
-			risk_overview: "Risk Overview",
-			risk_comments: "Risk Comments",
-			tasks: {
-				task_overview: "Task Overview",
-			},
-		},
-		policies: {
-			all: "All Policies",
-			editor: "Policy Editor",
-			policy_details: "Policy Details",
-		},
-		people: {
-			all: "People",
-			employee_details: "Employee Details",
-		},
-		settings: {
-			members: "Team Members",
-		},
-		frameworks: {
-			overview: "Frameworks",
-		},
-		tests: {
-			overview: "Cloud Tests",
-			test_details: "Test Details",
-		},
-	},
-	auth: {
-		title: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
-		description:
-			"Create a free account or log in with an existing account to continue.",
-		options: "More options",
-		google: "Continue with Google",
-		email: {
-			description: "Enter your email address to continue.",
-			placeholder: "Enter email address",
-			button: "Continue with email",
-			magic_link_sent: "Magic link sent",
-			magic_link_description: "Check your inbox for a magic link.",
-			magic_link_try_again: "Try again.",
-			success: "Email sent - check your inbox!",
-			error: "Error sending email - try again?",
-		},
-		terms:
-			"By clicking continue, you acknowledge that you have read and agree to the Terms of Service and Privacy Policy.",
-	},
-	onboarding: {
-		title: "Create an organization",
-		setup: "Setup",
-		description: "Tell us a bit about your organization.",
-		fields: {
-			fullName: {
-				label: "Your Name",
-				placeholder: "Your full name",
-			},
-			name: {
-				label: "Organization Name",
-				placeholder: "Your organization name",
-			},
-			subdomain: {
-				label: "Subdomain",
-				placeholder: "example",
-			},
-			website: {
-				label: "Website",
-				placeholder: "Your organization website",
-			},
-		},
-		success: "Thanks, you're all set!",
-		error: "Something went wrong, please try again.",
-		check_availability: "Checking availability",
-		available: "Available",
-		unavailable: "Unavailable",
-	},
-	overview: {
-		title: "Overview",
-		framework_chart: {
-			title: "Framework Progress",
-		},
-		requirement_chart: {
-			title: "Compliance Status",
-		},
-	},
-	policies: {
-		dashboard: {
-			title: "Dashboard",
-			all: "All Policies",
-			policy_status: "Policy by Status",
-			policies_by_assignee: "Policies by Assignee",
-			policies_by_framework: "Policies by Framework",
-			sub_pages: {
-				overview: "Overview",
-				edit_policy: "Edit Policy",
-			},
-		},
-		overview: {
-			title: "Policy Overview",
-			form: {
-				update_policy: "Update Policy",
-				update_policy_description: "Update the policy title or description.",
-				update_policy_success: "Policy updated successfully",
-				update_policy_error: "Failed to update policy",
-				update_policy_title: "Policy Name",
-				review_frequency: "Review Frequency",
-				review_frequency_placeholder: "Select a review frequency",
-				review_date: "Review Date",
-				review_date_placeholder: "Select a review date",
-				required_to_sign: "Required to be signed by employees",
-				signature_required: "Require employees signature",
-				signature_not_required: "Do not ask employees to sign",
-				signature_requirement: "Signature Requirement",
-				signature_requirement_placeholder: "Select signature requirement",
-			},
-		},
-		new: {
-			success: "Policy successfully created",
-			error: "Failed to create policy",
-			details: "Policy Details",
-			title: "Enter a title for the policy",
-			description: "Enter a description for the policy",
-		},
-		table: {
-			name: "Policy Name",
-			statuses: {
-				draft: "Draft",
-				published: "Published",
-				archived: "Archived",
-			},
-			filters: {
-				owner: {
-					label: "Assignee",
-					placeholder: "Filter by assignee",
-				},
-			},
-		},
-		filters: {
-			search: "Search policies...",
-			all: "All Policies",
-		},
-		status: {
-			draft: "Draft",
-			published: "Published",
-			needs_review: "Needs Review",
-			archived: "Archived",
-		},
-		policies: "policies",
-		title: "Policies",
-		create_new: "Create New Policy",
-		search_placeholder: "Search policies...",
-		status_filter: "Filter by status",
-		all_statuses: "All statuses",
-		no_policies_title: "No policies yet",
-		no_policies_description: "Get started by creating your first policy",
-		create_first: "Create first policy",
-		no_description: "No description provided",
-		last_updated: "Last updated: {{date}}",
-		save: "Save",
-		saving: "Saving...",
-		saved_success: "Policy saved successfully",
-		saved_error: "Failed to save policy",
-	},
-	evidence_tasks: {
-		evidence_tasks: "Evidence Tasks",
-		overview: "Overview",
-	},
-	risk: {
-		risks: "risks",
-		overview: "Overview",
-		create: "Create New Risk",
-		vendor: {
-			title: "Vendor Management",
-			dashboard: {
-				title: "Vendor Dashboard",
-				overview: "Vendor Overview",
-				vendor_status: "Vendor Status",
-				vendor_category: "Vendor Categories",
-				vendors_by_assignee: "Vendors by Assignee",
-				inherent_risk_description:
-					"Initial risk level before any controls are applied",
-				residual_risk_description:
-					"Remaining risk level after controls are applied",
-			},
-			register: {
-				title: "Vendor Register",
-				table: {
-					name: "Name",
-					category: "Category",
-					status: "Status",
-					owner: "Owner",
-				},
-			},
-			assessment: {
-				title: "Vendor Assessment",
-				update_success: "Vendor risk assessment updated successfully",
-				update_error: "Failed to update vendor risk assessment",
-				inherent_risk: "Inherent Risk",
-				residual_risk: "Residual Risk",
-			},
-			form: {
-				vendor_details: "Vendor Details",
-				vendor_name: "Name",
-				vendor_name_placeholder: "Enter vendor name",
-				vendor_website: "Website",
-				vendor_website_placeholder: "Enter vendor website",
-				vendor_description: "Description",
-				vendor_description_placeholder: "Enter vendor description",
-				vendor_category: "Category",
-				vendor_category_placeholder: "Select category",
-				vendor_status: "Status",
-				vendor_status_placeholder: "Select status",
-				create_vendor_success: "Vendor created successfully",
-				create_vendor_error: "Failed to create vendor",
-				update_vendor: "Update Vendor",
-				update_vendor_success: "Vendor updated successfully",
-				update_vendor_error: "Failed to update vendor",
-				add_comment: "Add Comment",
-			},
-			table: {
-				name: "Name",
-				category: "Category",
-				status: "Status",
-				owner: "Owner",
-			},
-			filters: {
-				search_placeholder: "Search vendors...",
-				status_placeholder: "Filter by status",
-				category_placeholder: "Filter by category",
-				owner_placeholder: "Filter by owner",
-			},
-			empty_states: {
-				no_vendors: {
-					title: "No vendors yet",
-					description: "Get started by creating your first vendor",
-				},
-				no_results: {
-					title: "No results found",
-					description: "No vendors match your search",
-					description_with_filters: "Try adjusting your filters",
-				},
-			},
-			actions: {
-				create: "Create Vendor",
-			},
-			status: {
-				not_assessed: "Not Assessed",
-				in_progress: "In Progress",
-				assessed: "Assessed",
-			},
-			category: {
-				cloud: "Cloud",
-				infrastructure: "Infrastructure",
-				software_as_a_service: "Software as a Service",
-				finance: "Finance",
-				marketing: "Marketing",
-				sales: "Sales",
-				hr: "HR",
-				other: "Other",
-			},
-			risk_level: {
-				low: "Low Risk",
-				medium: "Medium Risk",
-				high: "High Risk",
-				unknown: "Unknown Risk",
-			},
-		},
-		dashboard: {
-			title: "Dashboard",
-			overview: "Risk Overview",
-			risk_status: "Risk Status",
-			risks_by_department: "Risks by Department",
-			risks_by_assignee: "Risks by Assignee",
-			inherent_risk_description:
-				"Inherent risk is calculated as likelihood * impact. Calculated before any controls are applied.",
-			residual_risk_description:
-				"Residual risk is calculated as likelihood * impact. This is the risk level after controls are applied.",
-			risk_assessment_description: "Compare inherent and residual risk levels",
-		},
-		register: {
-			title: "Risk Register",
-			table: {
-				risk: "Risk",
-			},
-			empty: {
-				no_risks: {
-					title: "Create a risk to get started",
-					description:
-						"Track and score risks, create and assign mitigation tasks for your team, and manage your risk register all in one simple interface.",
-				},
-				create_risk: "Create a risk",
-			},
-		},
-		metrics: {
-			probability: "Probability",
-			impact: "Impact",
-			inherentRisk: "Inherent Risk",
-			residualRisk: "Residual Risk",
-		},
-		form: {
-			update_inherent_risk: "Save Inherent Risk",
-			update_inherent_risk_description:
-				"Update the inherent risk of the risk. This is the risk level before any controls are applied.",
-			update_inherent_risk_success: "Inherent risk updated successfully",
-			update_inherent_risk_error: "Failed to update inherent risk",
-			update_residual_risk: "Save Residual Risk",
-			update_residual_risk_description:
-				"Update the residual risk of the risk. This is the risk level after controls are applied.",
-			update_residual_risk_success: "Residual risk updated successfully",
-			update_residual_risk_error: "Failed to update residual risk",
-			update_risk: "Update Risk",
-			update_risk_description: "Update the risk title or description.",
-			update_risk_success: "Risk updated successfully",
-			update_risk_error: "Failed to update risk",
-			create_risk_success: "Risk created successfully",
-			create_risk_error: "Failed to create risk",
-			risk_details: "Risk Details",
-			risk_title: "Risk Title",
-			risk_title_description: "Enter a name for the risk",
-			risk_description: "Description",
-			risk_description_description: "Enter a description for the risk",
-			risk_category: "Category",
-			risk_category_placeholder: "Select a category",
-			risk_department: "Department",
-			risk_department_placeholder: "Select a department",
-			risk_status: "Risk Status",
-			risk_status_placeholder: "Select a risk status",
-		},
-		tasks: {
-			title: "Tasks",
-			attachments: "Attachments",
-			overview: "Task Overview",
-			form: {
-				title: "Task Details",
-				task_title: "Task Title",
-				status: "Task Status",
-				status_placeholder: "Select a task status",
-				task_title_description: "Enter a name for the task",
-				description: "Description",
-				description_description: "Enter a description for the task",
-				due_date: "Due Date",
-				due_date_description: "Select the due date for the task",
-				success: "Task created successfully",
-				error: "Failed to create task",
-			},
-			sheet: {
-				title: "Create Task",
-				update: "Update Task",
-				update_description: "Update the task title or description.",
-			},
-			empty: {
-				description_create:
-					"Create a mitigation task for this risk, add a treatment plan, and assign it to a team member.",
-			},
-		},
-	},
-	people: {
-		title: "People",
-		details: {
-			taskProgress: "Task Progress",
-			tasks: "Tasks",
-			noTasks: "No tasks assigned yet",
-		},
-		description: "Manage your team members and their roles.",
-		filters: {
-			search: "Search people...",
-			role: "Filter by role",
-		},
-		actions: {
-			invite: "Add Employee",
-			clear: "Clear filters",
-		},
-		table: {
-			name: "Name",
-			email: "Email",
-			department: "Department",
-			externalId: "External ID",
-			status: "Status",
-		},
-		empty: {
-			no_employees: {
-				title: "No employees yet",
-				description: "Get started by inviting your first team member.",
-			},
-			no_results: {
-				title: "No results found",
-				description: "No employees match your search",
-				description_with_filters: "Try adjusting your filters",
-			},
-		},
-		invite: {
-			title: "Add Employee",
-			description: "Add an employee to your organization.",
-			email: {
-				label: "Email address",
-				placeholder: "Enter email address",
-			},
-			role: {
-				label: "Role",
-				placeholder: "Select a role",
-			},
-			name: {
-				label: "Name",
-				placeholder: "Enter name",
-			},
-			department: {
-				label: "Department",
-				placeholder: "Select a department",
-			},
-			submit: "Add Employee",
-			success: "Employee added successfully",
-			error: "Failed to add employee",
-		},
-	},
-	settings: {
-		general: {
-			title: "General",
-			org_name: "Organization name",
-			org_name_description:
-				"This is your organizations visible name. You should use the legal name of your organization.",
-			org_name_tip: "Please use 32 characters at maximum.",
-			org_website: "Organization Website",
-			org_website_description:
-				"This is your organization's official website URL. Make sure to include the full URL with https://.",
-			org_website_tip: "Please enter a valid URL including https://",
-			org_website_error: "Error updating organization website",
-			org_website_updated: "Organization website updated",
-			org_delete: "Delete organization",
-			org_delete_description:
-				"Permanently remove your organization and all of its contents from the Comp AI platform. This action is not reversible - please continue with caution.",
-			org_delete_alert_title: "Are you absolutely sure?",
-			org_delete_alert_description:
-				"This action cannot be undone. This will permanently delete your organization and remove your data from our servers.",
-			org_delete_error: "Error deleting organization",
-			org_delete_success: "Organization deleted",
-			org_name_updated: "Organization name updated",
-			org_name_error: "Error updating organization name",
-			save_button: "Save",
-			delete_button: "Delete",
-			delete_confirm: "DELETE",
-			delete_confirm_tip: "Type DELETE to confirm.",
-			cancel_button: "Cancel",
-		},
-		members: {
-			title: "Members",
-		},
-		api_keys: {
-			title: "API Keys",
-			description:
-				"Manage API keys for programmatic access to your organization's data.",
-			list_title: "API Keys",
-			list_description:
-				"API keys allow secure access to your organization's data via our API.",
-			create: "New API Key",
-			create_title: "New API Key",
-			create_description:
-				"Create a new API key for programmatic access to your organization's data.",
-			created_title: "API Key Created",
-			created_description:
-				"Your API key has been created. Make sure to copy it now as you won't be able to see it again.",
-			name: "Name",
-			name_label: "Name",
-			name_placeholder: "Enter a name for this API key",
-			expiration: "Expiration",
-			expiration_placeholder: "Select expiration",
-			expires_label: "Expires",
-			expires_placeholder: "Select expiration",
-			expires_30days: "30 days",
-			expires_90days: "90 days",
-			expires_1year: "1 year",
-			expires_never: "Never",
-			thirty_days: "30 days",
-			ninety_days: "90 days",
-			one_year: "1 year",
-			your_key: "Your API Key",
-			api_key: "API Key",
-			save_warning:
-				"This key will only be shown once. Make sure to copy it now.",
-			copied: "API key copied to clipboard",
-			close_confirm:
-				"Are you sure you want to close? You won't be able to see this API key again.",
-			revoke_confirm:
-				"Are you sure you want to revoke this API key? This action cannot be undone.",
-			revoke_title: "Revoke API Key",
-			revoke: "Revoke",
-			created: "Created",
-			expires: "Expires",
-			last_used: "Last Used",
-			actions: "Actions",
-			never: "Never",
-			never_used: "Never used",
-			no_keys: "No API keys found. Create one to get started.",
-			security_note:
-				"API keys provide full access to your organization's data. Keep them secure and rotate them regularly.",
-			fetch_error: "Failed to fetch API keys",
-			create_error: "Failed to create API key",
-			revoked_success: "API key revoked successfully",
-			revoked_error: "Failed to revoke API key",
-			done: "Done",
-		},
-		billing: {
-			title: "Billing",
-		},
-		team: {
-			tabs: {
-				members: "Team Members",
-				invite: "Invite Members",
-			},
-			members: {
-				title: "Team Members",
-				empty: {
-					no_organization: {
-						title: "No Organization",
-						description: "You are not part of any organization",
-					},
-					no_members: {
-						title: "No Members",
-						description: "There are no active members in your organization",
-					},
-				},
-				role: {
-					owner: "Owner",
-					admin: "Admin",
-					member: "Member",
-					viewer: "Viewer",
-				},
-			},
-			invitations: {
-				title: "Pending Invitations",
-				description: "Users who have been invited but haven't accepted yet",
-				empty: {
-					no_organization: {
-						title: "No Organization",
-						description: "You are not part of any organization",
-					},
-					no_invitations: {
-						title: "No Pending Invitations",
-						description: "There are no pending invitations",
-					},
-				},
-				invitation_sent: "Invitation sent",
-				actions: {
-					resend: "Resend Invite",
-					sending: "Sending Invite",
-					revoke: "Revoke",
-					revoke_title: "Revoke Invitation",
-					revoke_description_prefix:
-						"Are you sure you want to revoke the invitation for",
-					revoke_description_suffix: "This action cannot be undone.",
-				},
-				toast: {
-					resend_success_prefix: "An invitation email has been sent to",
-					resend_error: "Failed to send invitation",
-					resend_unexpected:
-						"An unexpected error occurred while sending the invitation",
-					revoke_success_prefix: "Invitation to",
-					revoke_success_suffix: "has been revoked",
-					revoke_error: "Failed to revoke invitation",
-					revoke_unexpected:
-						"An unexpected error occurred while revoking the invitation",
-				},
-			},
-			invite: {
-				title: "Invite Team Member",
-				description:
-					"Send an invitation to a new team member to join your organization",
-				form: {
-					email: {
-						label: "Email",
-						placeholder: "member@example.com",
-						error: "Please enter a valid email address",
-					},
-					role: {
-						label: "Role",
-						placeholder: "Select a role",
-						error: "Please select a role",
-					},
-					department: {
-						label: "Department",
-						placeholder: "Select a department",
-						error: "Please select a department",
-					},
-					departments: {
-						none: "None",
-						it: "IT",
-						hr: "HR",
-						admin: "Admin",
-						gov: "Government",
-						itsm: "ITSM",
-						qms: "QMS",
-					},
-				},
-				button: {
-					send: "Send Invitation",
-					sending: "Sending invitation...",
-					sent: "Invitation Sent",
-				},
-				toast: {
-					error: "Failed to send invitation",
-					unexpected:
-						"An unexpected error occurred while sending the invitation",
-				},
-			},
-			member_actions: {
-				actions: "Actions",
-				change_role: "Change Role",
-				remove_member: "Remove Member",
-				remove_confirm: {
-					title: "Remove Team Member",
-					description_prefix: "Are you sure you want to remove",
-					description_suffix: "This action cannot be undone.",
-				},
-				role_dialog: {
-					title: "Change Role",
-					description_prefix: "Update the role for",
-					role_label: "Role",
-					role_placeholder: "Select a role",
-					role_descriptions: {
-						admin: "Admins can manage team members and settings.",
-						member:
-							"Members can use all features but cannot manage team members.",
-						viewer: "Viewers can only view content without making changes.",
-					},
-					cancel: "Cancel",
-					update: "Update Role",
-				},
-				toast: {
-					remove_success: "has been removed from the organization",
-					remove_error: "Failed to remove member",
-					remove_unexpected:
-						"An unexpected error occurred while removing the member",
-					update_role_success: "has had their role updated to",
-					update_role_error: "Failed to update member role",
-					update_role_unexpected:
-						"An unexpected error occurred while updating the member's role",
-				},
-			},
-		},
-	},
-	tests: {
-		dashboard: {
-			overview: "Overview",
-			all: "All Tests",
-			tests_by_assignee: "Tests by Assignee",
-			passed: "Passed",
-			failed: "Failed",
-			severity_distribution: "Test Severity Distribution",
-		},
-		severity: {
-			low: "Low",
-			medium: "Medium",
-			high: "High",
-			critical: "Critical",
-		},
-		name: "Cloud Tests",
-		title: "Cloud Tests",
-		actions: {
-			create: "Add Cloud Test",
-			clear: "Clear filters",
-			refresh: "Refresh",
-			refresh_success: "Tests refreshed successfully",
-			refresh_error: "Failed to refresh tests",
-		},
-		empty: {
-			no_tests: {
-				title: "No cloud tests yet",
-				description: "Get started by creating your first cloud test.",
-			},
-			no_results: {
-				title: "No results found",
-				description: "No tests match your search",
-				description_with_filters: "Try adjusting your filters",
-			},
-		},
-		filters: {
-			search: "Search tests...",
-			role: "Filter by vendor",
-		},
-		register: {
-			title: "Add Cloud Test",
-			description: "Configure a new cloud compliance test.",
-			submit: "Create Test",
-			success: "Test created successfully",
-			invalid_json: "Invalid JSON configuration provided",
+  language: {
+    title: "Languages",
+    description: "Change the language used in the user interface.",
+    placeholder: "Select language",
+  },
+  languages: {
+    en: "English",
+    es: "Spanish",
+    fr: "French",
+    no: "Norwegian",
+    pt: "Portuguese",
+  },
+  common: {
+    frequency: {
+      daily: "Daily",
+      weekly: "Weekly",
+      monthly: "Monthly",
+      quarterly: "Quarterly",
+      yearly: "Yearly",
+    },
+    notifications: {
+      inbox: "Inbox",
+      archive: "Archive",
+      archive_all: "Archive all",
+      no_notifications: "No new notifications",
+    },
+    actions: {
+      save: "Save",
+      edit: "Edit",
+      delete: "Delete",
+      cancel: "Cancel",
+      clear: "Clear",
+      create: "Create",
+      addNew: "Add New",
+      send: "Send",
+      return: "Return",
+      success: "Success",
+      error: "Error",
+      next: "Next",
+      complete: "Complete",
+    },
+    assignee: {
+      label: "Assignee",
+      placeholder: "Select assignee",
+    },
+    date: {
+      pick: "Pick a date",
+      due_date: "Due Date",
+    },
+    status: {
+      open: "Open",
+      pending: "Pending",
+      closed: "Closed",
+      archived: "Archived",
+      compliant: "Compliant",
+      non_compliant: "Non Compliant",
+      not_started: "Not Started",
+      in_progress: "In Progress",
+      published: "Published",
+      needs_review: "Needs Review",
+      draft: "Draft",
+      not_assessed: "Not Assessed",
+      assessed: "Assessed",
+      active: "Active",
+      inactive: "Inactive",
+      title: "Status",
+    },
+    filters: {
+      clear: "Clear filters",
+      search: "Search...",
+      status: "Status",
+      department: "Department",
+      owner: {
+        label: "Assignee",
+        placeholder: "Filter by assignee",
+      },
+    },
+    table: {
+      title: "Title",
+      status: "Status",
+      assigned_to: "Assigned To",
+      due_date: "Due Date",
+      last_updated: "Last Updated",
+      no_results: "No results found",
+    },
+    empty_states: {
+      no_results: {
+        title: "No results found",
+        title_tasks: "No tasks found",
+        title_risks: "No risks found",
+        description: "Try another search, or adjusting the filters",
+        description_filters: "Try another search, or adjusting the filters",
+        description_no_tasks: "Create a task to get started",
+        description_no_risks: "Create a risk to get started",
+      },
+      no_items: {
+        title: "No items found",
+        description: "Try adjusting your search or filters",
+      },
+    },
+    pagination: {
+      of: "of",
+      items_per_page: "Items per page",
+      rows_per_page: "Rows per page",
+      page_x_of_y: "Page {{current}} of {{total}}",
+      go_to_first_page: "Go to first page",
+      go_to_previous_page: "Go to previous page",
+      go_to_next_page: "Go to next page",
+      go_to_last_page: "Go to last page",
+    },
+    comments: {
+      title: "Comments",
+      description: "Add a comment using the form below.",
+      add: "New Comment",
+      new: "New Comment",
+      save: "Save Comment",
+      success: "Comment added successfully",
+      error: "Failed to add comment",
+      placeholder: "Write your comment here...",
+      empty: {
+        title: "No comments yet",
+        description: "Be the first to add a comment",
+      },
+    },
+    upload: {
+      fileUpload: {
+        uploadingText: "Uploading...",
+        uploadingFile: "Uploading file...",
+        dropFileHere: "Drop file here",
+        dropFileHereAlt: "Drop file here",
+        releaseToUpload: "Release to upload",
+        addFiles: "Add Files",
+        uploadAdditionalEvidence: "Upload a file or document",
+        dragDropOrClick: "Drag and drop or click to browse",
+        dragDropOrClickToSelect: "Drag and drop or click to select file",
+        maxFileSize: "Max file size: {size}MB",
+      },
+      fileUrl: {
+        additionalLinks: "Additional Links",
+        add: "Add",
+        linksAdded: "{count} link{s} added",
+        enterUrl: "Enter URL",
+        addAnotherLink: "Add Another Link",
+        saveLinks: "Save Links",
+        urlBadge: "URL",
+        copyLink: "Copy Link",
+        openLink: "Open Link",
+        deleteLink: "Delete Link",
+      },
+      fileCard: {
+        preview: "Preview",
+        filePreview: "File Preview: {fileName}",
+        previewNotAvailable: "Preview not available for this file type",
+        openFile: "Open File",
+        deleteFile: "Delete File",
+        deleteFileConfirmTitle: "Delete File",
+        deleteFileConfirmDescription:
+          "This action cannot be undone. The file will be permanently deleted.",
+      },
+      fileSection: {
+        filesUploaded: "{count} files uploaded",
+      },
+    },
+    attachments: {
+      title: "Attachments",
+      description: "Add a file by clicking 'Add Attachment'.",
+      upload: "Upload attachment",
+      upload_description:
+        "Upload an attachment or add a link to an external resource.",
+      drop: "Drop the files here",
+      drop_description:
+        "Drop files here or click to choose files from your device.",
+      drop_files_description: "Files can be up to ",
+      empty: {
+        title: "No attachments",
+        description: "Add a file by clicking 'Add Attachment'.",
+      },
+      toasts: {
+        error: "Something went wrong, please try again.",
+        error_uploading_files: "Cannot upload more than 1 file at a time",
+        error_uploading_files_multiple: "Cannot upload more than 10 files",
+        error_no_files_selected: "No files selected",
+        error_file_rejected: "File {file} was rejected",
+        error_failed_to_upload_files: "Failed to upload files",
+        error_failed_to_upload_files_multiple: "Failed to upload files",
+        error_failed_to_upload_files_single: "Failed to upload file",
+        success_uploading_files: "Files uploaded successfully",
+        success_uploading_files_multiple: "Files uploaded successfully",
+        success_uploading_files_single: "File uploaded successfully",
+        success_uploading_files_target: "Files uploaded",
+        uploading_files: "Uploading {target}...",
+        remove_file: "Remove file",
+      },
+    },
+    edit: "Edit",
+    errors: {
+      unexpected_error: "An unexpected error occurred",
+    },
+    description: "Description",
+    last_updated: "Last Updated",
+  },
+  header: {
+    discord: {
+      button: "Join us on Discord",
+    },
+    feedback: {
+      button: "Feedback",
+      title: "Thank you for your feedback!",
+      description: "We will be back with you as soon as possible",
+      placeholder: "Ideas to improve this page or issues you are experiencing.",
+      success: "Thank you for your feedback!",
+      error: "Error sending feedback - try again?",
+      send: "Send Feedback",
+    },
+  },
+  not_found: {
+    title: "404 - Page not found",
+    description: "The page you are looking for does not exist.",
+    return: "Return to dashboard",
+  },
+  theme: {
+    options: {
+      light: "Light",
+      dark: "Dark",
+      system: "System",
+    },
+  },
+  sidebar: {
+    overview: "Overview",
+    policies: "Policies",
+    risk: "Risk Management",
+    vendors: "Vendors",
+    integrations: "Integrations",
+    settings: "Settings",
+    evidence: "Evidence Tasks",
+    people: "People",
+    tests: "Cloud Tests",
+  },
+  sub_pages: {
+    evidence: {
+      title: "Evidence",
+      list: "Evidence List",
+      overview: "Evidence Overview",
+    },
+    risk: {
+      overview: "Risk Management",
+      register: "Risk Register",
+      risk_overview: "Risk Overview",
+      risk_comments: "Risk Comments",
+      tasks: {
+        task_overview: "Task Overview",
+      },
+    },
+    policies: {
+      all: "All Policies",
+      editor: "Policy Editor",
+      policy_details: "Policy Details",
+    },
+    people: {
+      all: "People",
+      employee_details: "Employee Details",
+    },
+    settings: {
+      members: "Team Members",
+    },
+    frameworks: {
+      overview: "Frameworks",
+    },
+    tests: {
+      overview: "Cloud Tests",
+      test_details: "Test Details",
+    },
+  },
+  auth: {
+    title: "Automate SOC 2, ISO 27001 and GDPR compliance with AI.",
+    description:
+      "Create a free account or log in with an existing account to continue.",
+    options: "More options",
+    google: "Continue with Google",
+    email: {
+      description: "Enter your email address to continue.",
+      placeholder: "Enter email address",
+      button: "Continue with email",
+      magic_link_sent: "Magic link sent",
+      magic_link_description: "Check your inbox for a magic link.",
+      magic_link_try_again: "Try again.",
+      success: "Email sent - check your inbox!",
+      error: "Error sending email - try again?",
+    },
+    terms:
+      "By clicking continue, you acknowledge that you have read and agree to the Terms of Service and Privacy Policy.",
+  },
+  onboarding: {
+    title: "Create an organization",
+    setup: "Setup",
+    description: "Tell us a bit about your organization.",
+    fields: {
+      fullName: {
+        label: "Your Name",
+        placeholder: "Your full name",
+      },
+      name: {
+        label: "Organization Name",
+        placeholder: "Your organization name",
+      },
+      subdomain: {
+        label: "Subdomain",
+        placeholder: "example",
+      },
+      website: {
+        label: "Website",
+        placeholder: "Your organization website",
+      },
+    },
+    success: "Thanks, you're all set!",
+    error: "Something went wrong, please try again.",
+    check_availability: "Checking availability",
+    available: "Available",
+    unavailable: "Unavailable",
+  },
+  overview: {
+    title: "Overview",
+    framework_chart: {
+      title: "Framework Progress",
+    },
+    requirement_chart: {
+      title: "Compliance Status",
+    },
+  },
+  policies: {
+    dashboard: {
+      title: "Dashboard",
+      all: "All Policies",
+      policy_status: "Policy by Status",
+      policies_by_assignee: "Policies by Assignee",
+      policies_by_framework: "Policies by Framework",
+      sub_pages: {
+        overview: "Overview",
+        edit_policy: "Edit Policy",
+      },
+    },
+    overview: {
+      title: "Policy Overview",
+      form: {
+        update_policy: "Update Policy",
+        update_policy_description: "Update the policy title or description.",
+        update_policy_success: "Policy updated successfully",
+        update_policy_error: "Failed to update policy",
+        update_policy_title: "Policy Name",
+        review_frequency: "Review Frequency",
+        review_frequency_placeholder: "Select a review frequency",
+        review_date: "Review Date",
+        review_date_placeholder: "Select a review date",
+        required_to_sign: "Required to be signed by employees",
+        signature_required: "Require employees signature",
+        signature_not_required: "Do not ask employees to sign",
+        signature_requirement: "Signature Requirement",
+        signature_requirement_placeholder: "Select signature requirement",
+      },
+    },
+    new: {
+      success: "Policy successfully created",
+      error: "Failed to create policy",
+      details: "Policy Details",
+      title: "Enter a title for the policy",
+      description: "Enter a description for the policy",
+    },
+    table: {
+      name: "Policy Name",
+      statuses: {
+        draft: "Draft",
+        published: "Published",
+        archived: "Archived",
+      },
+      filters: {
+        owner: {
+          label: "Assignee",
+          placeholder: "Filter by assignee",
+        },
+      },
+    },
+    filters: {
+      search: "Search policies...",
+      all: "All Policies",
+    },
+    status: {
+      draft: "Draft",
+      published: "Published",
+      needs_review: "Needs Review",
+      archived: "Archived",
+    },
+    policies: "policies",
+    title: "Policies",
+    create_new: "Create New Policy",
+    search_placeholder: "Search policies...",
+    status_filter: "Filter by status",
+    all_statuses: "All statuses",
+    no_policies_title: "No policies yet",
+    no_policies_description: "Get started by creating your first policy",
+    create_first: "Create first policy",
+    no_description: "No description provided",
+    last_updated: "Last updated: {{date}}",
+    save: "Save",
+    saving: "Saving...",
+    saved_success: "Policy saved successfully",
+    saved_error: "Failed to save policy",
+  },
+  evidence_tasks: {
+    evidence_tasks: "Evidence Tasks",
+    overview: "Overview",
+  },
+  risk: {
+    risks: "risks",
+    overview: "Overview",
+    create: "Create New Risk",
+    vendor: {
+      title: "Vendor Management",
+      dashboard: {
+        title: "Vendor Dashboard",
+        overview: "Vendor Overview",
+        vendor_status: "Vendor Status",
+        vendor_category: "Vendor Categories",
+        vendors_by_assignee: "Vendors by Assignee",
+        inherent_risk_description:
+          "Initial risk level before any controls are applied",
+        residual_risk_description:
+          "Remaining risk level after controls are applied",
+      },
+      register: {
+        title: "Vendor Register",
+        table: {
+          name: "Name",
+          category: "Category",
+          status: "Status",
+          owner: "Owner",
+        },
+      },
+      assessment: {
+        title: "Vendor Assessment",
+        update_success: "Vendor risk assessment updated successfully",
+        update_error: "Failed to update vendor risk assessment",
+        inherent_risk: "Inherent Risk",
+        residual_risk: "Residual Risk",
+      },
+      form: {
+        vendor_details: "Vendor Details",
+        vendor_name: "Name",
+        vendor_name_placeholder: "Enter vendor name",
+        vendor_website: "Website",
+        vendor_website_placeholder: "Enter vendor website",
+        vendor_description: "Description",
+        vendor_description_placeholder: "Enter vendor description",
+        vendor_category: "Category",
+        vendor_category_placeholder: "Select category",
+        vendor_status: "Status",
+        vendor_status_placeholder: "Select status",
+        create_vendor_success: "Vendor created successfully",
+        create_vendor_error: "Failed to create vendor",
+        update_vendor: "Update Vendor",
+        update_vendor_success: "Vendor updated successfully",
+        update_vendor_error: "Failed to update vendor",
+        add_comment: "Add Comment",
+      },
+      table: {
+        name: "Name",
+        category: "Category",
+        status: "Status",
+        owner: "Owner",
+      },
+      filters: {
+        search_placeholder: "Search vendors...",
+        status_placeholder: "Filter by status",
+        category_placeholder: "Filter by category",
+        owner_placeholder: "Filter by owner",
+      },
+      empty_states: {
+        no_vendors: {
+          title: "No vendors yet",
+          description: "Get started by creating your first vendor",
+        },
+        no_results: {
+          title: "No results found",
+          description: "No vendors match your search",
+          description_with_filters: "Try adjusting your filters",
+        },
+      },
+      actions: {
+        create: "Create Vendor",
+      },
+      status: {
+        not_assessed: "Not Assessed",
+        in_progress: "In Progress",
+        assessed: "Assessed",
+      },
+      category: {
+        cloud: "Cloud",
+        infrastructure: "Infrastructure",
+        software_as_a_service: "Software as a Service",
+        finance: "Finance",
+        marketing: "Marketing",
+        sales: "Sales",
+        hr: "HR",
+        other: "Other",
+      },
+      risk_level: {
+        low: "Low Risk",
+        medium: "Medium Risk",
+        high: "High Risk",
+        unknown: "Unknown Risk",
+      },
+    },
+    dashboard: {
+      title: "Dashboard",
+      overview: "Risk Overview",
+      risk_status: "Risk Status",
+      risks_by_department: "Risks by Department",
+      risks_by_assignee: "Risks by Assignee",
+      inherent_risk_description:
+        "Inherent risk is calculated as likelihood * impact. Calculated before any controls are applied.",
+      residual_risk_description:
+        "Residual risk is calculated as likelihood * impact. This is the risk level after controls are applied.",
+      risk_assessment_description: "Compare inherent and residual risk levels",
+    },
+    register: {
+      title: "Risk Register",
+      table: {
+        risk: "Risk",
+      },
+      empty: {
+        no_risks: {
+          title: "Create a risk to get started",
+          description:
+            "Track and score risks, create and assign mitigation tasks for your team, and manage your risk register all in one simple interface.",
+        },
+        create_risk: "Create a risk",
+      },
+    },
+    metrics: {
+      probability: "Probability",
+      impact: "Impact",
+      inherentRisk: "Inherent Risk",
+      residualRisk: "Residual Risk",
+    },
+    form: {
+      update_inherent_risk: "Save Inherent Risk",
+      update_inherent_risk_description:
+        "Update the inherent risk of the risk. This is the risk level before any controls are applied.",
+      update_inherent_risk_success: "Inherent risk updated successfully",
+      update_inherent_risk_error: "Failed to update inherent risk",
+      update_residual_risk: "Save Residual Risk",
+      update_residual_risk_description:
+        "Update the residual risk of the risk. This is the risk level after controls are applied.",
+      update_residual_risk_success: "Residual risk updated successfully",
+      update_residual_risk_error: "Failed to update residual risk",
+      update_risk: "Update Risk",
+      update_risk_description: "Update the risk title or description.",
+      update_risk_success: "Risk updated successfully",
+      update_risk_error: "Failed to update risk",
+      create_risk_success: "Risk created successfully",
+      create_risk_error: "Failed to create risk",
+      risk_details: "Risk Details",
+      risk_title: "Risk Title",
+      risk_title_description: "Enter a name for the risk",
+      risk_description: "Description",
+      risk_description_description: "Enter a description for the risk",
+      risk_category: "Category",
+      risk_category_placeholder: "Select a category",
+      risk_department: "Department",
+      risk_department_placeholder: "Select a department",
+      risk_status: "Risk Status",
+      risk_status_placeholder: "Select a risk status",
+    },
+    tasks: {
+      title: "Tasks",
+      attachments: "Attachments",
+      overview: "Task Overview",
+      form: {
+        title: "Task Details",
+        task_title: "Task Title",
+        status: "Task Status",
+        status_placeholder: "Select a task status",
+        task_title_description: "Enter a name for the task",
+        description: "Description",
+        description_description: "Enter a description for the task",
+        due_date: "Due Date",
+        due_date_description: "Select the due date for the task",
+        success: "Task created successfully",
+        error: "Failed to create task",
+      },
+      sheet: {
+        title: "Create Task",
+        update: "Update Task",
+        update_description: "Update the task title or description.",
+      },
+      empty: {
+        description_create:
+          "Create a mitigation task for this risk, add a treatment plan, and assign it to a team member.",
+      },
+    },
+  },
+  people: {
+    title: "People",
+    details: {
+      taskProgress: "Task Progress",
+      tasks: "Tasks",
+      noTasks: "No tasks assigned yet",
+    },
+    description: "Manage your team members and their roles.",
+    filters: {
+      search: "Search people...",
+      role: "Filter by role",
+    },
+    actions: {
+      invite: "Add Employee",
+      clear: "Clear filters",
+    },
+    table: {
+      name: "Name",
+      email: "Email",
+      department: "Department",
+      externalId: "External ID",
+      status: "Status",
+    },
+    empty: {
+      no_employees: {
+        title: "No employees yet",
+        description: "Get started by inviting your first team member.",
+      },
+      no_results: {
+        title: "No results found",
+        description: "No employees match your search",
+        description_with_filters: "Try adjusting your filters",
+      },
+    },
+    invite: {
+      title: "Add Employee",
+      description: "Add an employee to your organization.",
+      email: {
+        label: "Email address",
+        placeholder: "Enter email address",
+      },
+      role: {
+        label: "Role",
+        placeholder: "Select a role",
+      },
+      name: {
+        label: "Name",
+        placeholder: "Enter name",
+      },
+      department: {
+        label: "Department",
+        placeholder: "Select a department",
+      },
+      submit: "Add Employee",
+      success: "Employee added successfully",
+      error: "Failed to add employee",
+    },
+  },
+  settings: {
+    general: {
+      title: "General",
+      org_name: "Organization name",
+      org_name_description:
+        "This is your organizations visible name. You should use the legal name of your organization.",
+      org_name_tip: "Please use 32 characters at maximum.",
+      org_website: "Organization Website",
+      org_website_description:
+        "This is your organization's official website URL. Make sure to include the full URL with https://.",
+      org_website_tip: "Please enter a valid URL including https://",
+      org_website_error: "Error updating organization website",
+      org_website_updated: "Organization website updated",
+      org_delete: "Delete organization",
+      org_delete_description:
+        "Permanently remove your organization and all of its contents from the Comp AI platform. This action is not reversible - please continue with caution.",
+      org_delete_alert_title: "Are you absolutely sure?",
+      org_delete_alert_description:
+        "This action cannot be undone. This will permanently delete your organization and remove your data from our servers.",
+      org_delete_error: "Error deleting organization",
+      org_delete_success: "Organization deleted",
+      org_name_updated: "Organization name updated",
+      org_name_error: "Error updating organization name",
+      save_button: "Save",
+      delete_button: "Delete",
+      delete_confirm: "DELETE",
+      delete_confirm_tip: "Type DELETE to confirm.",
+      cancel_button: "Cancel",
+    },
+    members: {
+      title: "Members",
+    },
+    api_keys: {
+      title: "API Keys",
+      description:
+        "Manage API keys for programmatic access to your organization's data.",
+      list_title: "API Keys",
+      list_description:
+        "API keys allow secure access to your organization's data via our API.",
+      create: "New API Key",
+      create_title: "New API Key",
+      create_description:
+        "Create a new API key for programmatic access to your organization's data.",
+      created_title: "API Key Created",
+      created_description:
+        "Your API key has been created. Make sure to copy it now as you won't be able to see it again.",
+      name: "Name",
+      name_label: "Name",
+      name_placeholder: "Enter a name for this API key",
+      expiration: "Expiration",
+      expiration_placeholder: "Select expiration",
+      expires_label: "Expires",
+      expires_placeholder: "Select expiration",
+      expires_30days: "30 days",
+      expires_90days: "90 days",
+      expires_1year: "1 year",
+      expires_never: "Never",
+      thirty_days: "30 days",
+      ninety_days: "90 days",
+      one_year: "1 year",
+      your_key: "Your API Key",
+      api_key: "API Key",
+      save_warning:
+        "This key will only be shown once. Make sure to copy it now.",
+      copied: "API key copied to clipboard",
+      close_confirm:
+        "Are you sure you want to close? You won't be able to see this API key again.",
+      revoke_confirm:
+        "Are you sure you want to revoke this API key? This action cannot be undone.",
+      revoke_title: "Revoke API Key",
+      revoke: "Revoke",
+      created: "Created",
+      expires: "Expires",
+      last_used: "Last Used",
+      actions: "Actions",
+      never: "Never",
+      never_used: "Never used",
+      no_keys: "No API keys found. Create one to get started.",
+      security_note:
+        "API keys provide full access to your organization's data. Keep them secure and rotate them regularly.",
+      fetch_error: "Failed to fetch API keys",
+      create_error: "Failed to create API key",
+      revoked_success: "API key revoked successfully",
+      revoked_error: "Failed to revoke API key",
+      done: "Done",
+    },
+    billing: {
+      title: "Billing",
+    },
+    team: {
+      tabs: {
+        members: "Team Members",
+        invite: "Invite Members",
+      },
+      members: {
+        title: "Team Members",
+        empty: {
+          no_organization: {
+            title: "No Organization",
+            description: "You are not part of any organization",
+          },
+          no_members: {
+            title: "No Members",
+            description: "There are no active members in your organization",
+          },
+        },
+        role: {
+          owner: "Owner",
+          admin: "Admin",
+          member: "Member",
+          viewer: "Viewer",
+        },
+      },
+      invitations: {
+        title: "Pending Invitations",
+        description: "Users who have been invited but haven't accepted yet",
+        empty: {
+          no_organization: {
+            title: "No Organization",
+            description: "You are not part of any organization",
+          },
+          no_invitations: {
+            title: "No Pending Invitations",
+            description: "There are no pending invitations",
+          },
+        },
+        invitation_sent: "Invitation sent",
+        actions: {
+          resend: "Resend Invite",
+          sending: "Sending Invite",
+          revoke: "Revoke",
+          revoke_title: "Revoke Invitation",
+          revoke_description_prefix:
+            "Are you sure you want to revoke the invitation for",
+          revoke_description_suffix: "This action cannot be undone.",
+        },
+        toast: {
+          resend_success_prefix: "An invitation email has been sent to",
+          resend_error: "Failed to send invitation",
+          resend_unexpected:
+            "An unexpected error occurred while sending the invitation",
+          revoke_success_prefix: "Invitation to",
+          revoke_success_suffix: "has been revoked",
+          revoke_error: "Failed to revoke invitation",
+          revoke_unexpected:
+            "An unexpected error occurred while revoking the invitation",
+        },
+      },
+      invite: {
+        title: "Invite Team Member",
+        description:
+          "Send an invitation to a new team member to join your organization",
+        form: {
+          email: {
+            label: "Email",
+            placeholder: "member@example.com",
+            error: "Please enter a valid email address",
+          },
+          role: {
+            label: "Role",
+            placeholder: "Select a role",
+            error: "Please select a role",
+          },
+          department: {
+            label: "Department",
+            placeholder: "Select a department",
+            error: "Please select a department",
+          },
+          departments: {
+            none: "None",
+            it: "IT",
+            hr: "HR",
+            admin: "Admin",
+            gov: "Government",
+            itsm: "ITSM",
+            qms: "QMS",
+          },
+        },
+        button: {
+          send: "Send Invitation",
+          sending: "Sending invitation...",
+          sent: "Invitation Sent",
+        },
+        toast: {
+          error: "Failed to send invitation",
+          unexpected:
+            "An unexpected error occurred while sending the invitation",
+        },
+      },
+      member_actions: {
+        actions: "Actions",
+        change_role: "Change Role",
+        remove_member: "Remove Member",
+        remove_confirm: {
+          title: "Remove Team Member",
+          description_prefix: "Are you sure you want to remove",
+          description_suffix: "This action cannot be undone.",
+        },
+        role_dialog: {
+          title: "Change Role",
+          description_prefix: "Update the role for",
+          role_label: "Role",
+          role_placeholder: "Select a role",
+          role_descriptions: {
+            admin: "Admins can manage team members and settings.",
+            member:
+              "Members can use all features but cannot manage team members.",
+            viewer: "Viewers can only view content without making changes.",
+          },
+          cancel: "Cancel",
+          update: "Update Role",
+        },
+        toast: {
+          remove_success: "has been removed from the organization",
+          remove_error: "Failed to remove member",
+          remove_unexpected:
+            "An unexpected error occurred while removing the member",
+          update_role_success: "has had their role updated to",
+          update_role_error: "Failed to update member role",
+          update_role_unexpected:
+            "An unexpected error occurred while updating the member's role",
+        },
+      },
+    },
+  },
+  tests: {
+    dashboard: {
+      overview: "Overview",
+      all: "All Tests",
+      tests_by_assignee: "Tests by Assignee",
+      passed: "Passed",
+      failed: "Failed",
+      severity_distribution: "Test Severity Distribution",
+    },
+    severity: {
+      low: "Low",
+      medium: "Medium",
+      high: "High",
+      critical: "Critical",
+    },
+    name: "Cloud Tests",
+    title: "Cloud Tests",
+    actions: {
+      create: "Add Cloud Test",
+      clear: "Clear filters",
+      refresh: "Refresh",
+      refresh_success: "Tests refreshed successfully",
+      refresh_error: "Failed to refresh tests",
+    },
+    empty: {
+      no_tests: {
+        title: "No cloud tests yet",
+        description: "Get started by creating your first cloud test.",
+      },
+      no_results: {
+        title: "No results found",
+        description: "No tests match your search",
+        description_with_filters: "Try adjusting your filters",
+      },
+    },
+    filters: {
+      search: "Search tests...",
+      role: "Filter by vendor",
+    },
+    register: {
+      title: "Add Cloud Test",
+      description: "Configure a new cloud compliance test.",
+      submit: "Create Test",
+      success: "Test created successfully",
+      invalid_json: "Invalid JSON configuration provided",
 
-			title_field: {
-				label: "Test Title",
-				placeholder: "Enter test title",
-			},
-			description_field: {
-				label: "Description",
-				placeholder: "Enter test description",
-			},
-			provider: {
-				label: "Cloud Provider",
-				placeholder: "Select cloud provider",
-			},
-			config: {
-				label: "Test Configuration",
-				placeholder: "Enter JSON configuration for the test",
-			},
-			auth_config: {
-				label: "Authentication Configuration",
-				placeholder: "Enter JSON authentication configuration",
-			},
-		},
-		table: {
-			title: "Title",
-			provider: "Provider",
-			status: "Status",
-			severity: "Severity",
-			result: "Result",
-			createdAt: "Created At",
-			assignedUser: "Assigned User",
-			assignedUserEmpty: "Not Assigned",
-			no_results: "No results found",
-		},
-	},
-	user_menu: {
-		theme: "Theme",
-		language: "Language",
-		sign_out: "Sign out",
-		account: "Account",
-		support: "Support",
-		settings: "Settings",
-		teams: "Teams",
-	},
-	frameworks: {
-		title: "Frameworks",
-		overview: {
-			error: "Failed to load frameworks",
-			loading: "Loading frameworks...",
-			empty: {
-				title: "No frameworks selected",
-				description:
-					"Select frameworks to get started with your compliance journey",
-			},
-			progress: {
-				title: "Framework Progress",
-				empty: {
-					title: "No frameworks yet",
-					description:
-						"Get started by adding a compliance framework to track your progress",
-					action: "Add Framework",
-				},
-			},
-			grid: {
-				welcome: {
-					title: "Welcome to Comp AI",
-					description:
-						"Get started by selecting the compliance frameworks you would like to implement. We'll help you manage and track your compliance journey across multiple standards.",
-					action: "Get Started",
-				},
-				title: "Select Frameworks",
-				version: "Version",
-				actions: {
-					clear: "Clear",
-					confirm: "Confirm Selection",
-				},
-			},
-		},
-		controls: {
-			title: "Controls",
-			description: "Review and manage compliance controls",
-			table: {
-				status: "Status",
-				control: "Control",
-				artifacts: "Artifacts",
-				actions: "Actions",
-			},
-			statuses: {
-				completed: "Completed",
-				in_progress: "In Progress",
-				not_started: "Not Started",
-			},
-		},
-	},
-	errors: {
-		unexpected: "Something went wrong, please try again",
-	},
-	editor: {
-		ai: {
-			thinking: "AI is thinking",
-			thinking_spinner: "AI is thinking",
-			edit_or_generate: "Edit or generate...",
-			tell_ai_what_to_do_next: "Tell AI what to do next",
-			request_limit_reached: "You have reached your request limit for the day.",
-		},
-		ai_selector: {
-			improve: "Improve writing",
-			fix: "Fix grammar",
-			shorter: "Make shorter",
-			longer: "Make longer",
-			continue: "Continue writing",
-			replace: "Replace selection",
-			insert: "Insert below",
-			discard: "Discard",
-		},
-	},
-	evidence: {
-		title: "Evidence",
-		list: "All Evidence",
-		overview: "Evidence Overview",
-		edit: "Uploaded Evidence",
-		dashboard: {
-			layout: "Dashboard",
-			layout_back_button: "Back",
-			title: "Evidence Dashboard",
-			by_department: "By Department",
-			by_assignee: "By Assignee",
-			by_framework: "By Framework",
-		},
-		items: "items",
-		status: {
-			up_to_date: "Up to Date",
-			needs_review: "Needs Review",
-			draft: "Draft",
-			empty: "Empty",
-		},
-		departments: {
-			none: "Uncategorized",
-			admin: "Administration",
-			gov: "Governance",
-			hr: "Human Resources",
-			it: "Information Technology",
-			itsm: "IT Service Management",
-			qms: "Quality Management",
-		},
-		details: {
-			review_section: "Review Information",
-			content: "Evidence Content",
-		},
-	},
-	vendors: {
-		title: "Vendors",
-		register: {
-			title: "Vendor Register",
-		},
-		dashboard: {
-			title: "Vendor Overview",
-		},
-	},
-	dashboard: {
-		risk_status: "Risk Status",
-		risks_by_department: "Risks by Department",
-		vendor_status: "Vendor Status",
-		vendors_by_category: "Vendors by Category",
-	},
+      title_field: {
+        label: "Test Title",
+        placeholder: "Enter test title",
+      },
+      description_field: {
+        label: "Description",
+        placeholder: "Enter test description",
+      },
+      provider: {
+        label: "Cloud Provider",
+        placeholder: "Select cloud provider",
+      },
+      config: {
+        label: "Test Configuration",
+        placeholder: "Enter JSON configuration for the test",
+      },
+      auth_config: {
+        label: "Authentication Configuration",
+        placeholder: "Enter JSON authentication configuration",
+      },
+    },
+    table: {
+      title: "Title",
+      provider: "Provider",
+      status: "Status",
+      severity: "Severity",
+      result: "Result",
+      createdAt: "Created At",
+      assignedUser: "Assigned User",
+      assignedUserEmpty: "Not Assigned",
+      no_results: "No results found",
+    },
+  },
+  user_menu: {
+    theme: "Theme",
+    language: "Language",
+    sign_out: "Sign out",
+    account: "Account",
+    support: "Support",
+    settings: "Settings",
+    teams: "Teams",
+  },
+  frameworks: {
+    title: "Frameworks",
+    overview: {
+      error: "Failed to load frameworks",
+      loading: "Loading frameworks...",
+      empty: {
+        title: "No frameworks selected",
+        description:
+          "Select frameworks to get started with your compliance journey",
+      },
+      progress: {
+        title: "Framework Progress",
+        empty: {
+          title: "No frameworks yet",
+          description:
+            "Get started by adding a compliance framework to track your progress",
+          action: "Add Framework",
+        },
+      },
+      grid: {
+        welcome: {
+          title: "Welcome to Comp AI",
+          description:
+            "Get started by selecting the compliance frameworks you would like to implement. We'll help you manage and track your compliance journey across multiple standards.",
+          action: "Get Started",
+        },
+        title: "Select Frameworks",
+        version: "Version",
+        actions: {
+          clear: "Clear",
+          confirm: "Confirm Selection",
+        },
+      },
+    },
+    controls: {
+      title: "Controls",
+      description: "Review and manage compliance controls",
+      table: {
+        status: "Status",
+        control: "Control",
+        artifacts: "Artifacts",
+        actions: "Actions",
+      },
+      statuses: {
+        completed: "Completed",
+        in_progress: "In Progress",
+        not_started: "Not Started",
+      },
+    },
+  },
+  errors: {
+    unexpected: "Something went wrong, please try again",
+  },
+  editor: {
+    ai: {
+      thinking: "AI is thinking",
+      thinking_spinner: "AI is thinking",
+      edit_or_generate: "Edit or generate...",
+      tell_ai_what_to_do_next: "Tell AI what to do next",
+      request_limit_reached: "You have reached your request limit for the day.",
+    },
+    ai_selector: {
+      improve: "Improve writing",
+      fix: "Fix grammar",
+      shorter: "Make shorter",
+      longer: "Make longer",
+      continue: "Continue writing",
+      replace: "Replace selection",
+      insert: "Insert below",
+      discard: "Discard",
+    },
+  },
+  evidence: {
+    title: "Evidence",
+    list: "All Evidence",
+    overview: "Evidence Overview",
+    edit: "Uploaded Evidence",
+    dashboard: {
+      layout: "Dashboard",
+      layout_back_button: "Back",
+      title: "Evidence Dashboard",
+      by_department: "By Department",
+      by_assignee: "By Assignee",
+      by_framework: "By Framework",
+    },
+    items: "items",
+    status: {
+      up_to_date: "Up to Date",
+      needs_review: "Needs Review",
+      draft: "Draft",
+      empty: "Empty",
+    },
+    departments: {
+      none: "Uncategorized",
+      admin: "Administration",
+      gov: "Governance",
+      hr: "Human Resources",
+      it: "Information Technology",
+      itsm: "IT Service Management",
+      qms: "Quality Management",
+    },
+    details: {
+      review_section: "Review Information",
+      content: "Evidence Content",
+    },
+  },
+  vendors: {
+    title: "Vendors",
+    register: {
+      title: "Vendor Register",
+    },
+    dashboard: {
+      title: "Vendor Overview",
+    },
+  },
+  dashboard: {
+    risk_status: "Risk Status",
+    risks_by_department: "Risks by Department",
+    vendor_status: "Vendor Status",
+    vendors_by_category: "Vendors by Category",
+  },
 } as const;

From 75ce1c2c6a6262773dcc8d0cdfdcb529bd8cf5f7 Mon Sep 17 00:00:00 2001
From: Mariano Fuentes <marfuen98@gmail.com>
Date: Mon, 17 Mar 2025 17:45:44 -0400
Subject: [PATCH 8/8] fix build issues

---
 .../evidence/list/components/index.ts         |   1 -
 .../components/table/EvidenceFilters/index.ts |   3 -
 .../components/tables/people/empty-states.tsx |  92 +++++------
 .../tables/people/filter-toolbar.tsx          | 156 +++++++++---------
 yarn.lock                                     |   1 +
 5 files changed, 125 insertions(+), 128 deletions(-)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/index.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/index.ts
index 0a68e0ff04..81ee91ca32 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/index.ts
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/index.ts
@@ -1,3 +1,2 @@
 export { EvidenceList } from "./EvidenceList";
-export { SkeletonTable } from "./table/SkeletonTable";
 export * from "./table/EvidenceFilters";
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/index.ts b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/index.ts
index 21ad852505..15b35e6f3e 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/index.ts
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/evidence/list/components/table/EvidenceFilters/index.ts
@@ -1,4 +1 @@
-export { FilterDropdown } from "./FilterDropdown";
 export { ActiveFilterBadges } from "./ActiveFilterBadges";
-export { PaginationControls } from "./PaginationControls";
-export { SearchInput } from "./SearchInput";
diff --git a/apps/app/src/components/tables/people/empty-states.tsx b/apps/app/src/components/tables/people/empty-states.tsx
index 27beb58110..f8a8d61850 100644
--- a/apps/app/src/components/tables/people/empty-states.tsx
+++ b/apps/app/src/components/tables/people/empty-states.tsx
@@ -5,63 +5,63 @@ import { Button } from "@bubba/ui/button";
 import { Users } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useQueryState } from "nuqs";
-import { InviteUserSheet } from "@/components/sheets/invite-user-sheet";
 import { Plus } from "lucide-react";
+import { EmployeeInviteSheet } from "@/components/sheets/invite-user-sheet";
 
 interface Props {
-  hasFilters?: boolean;
+	hasFilters?: boolean;
 }
 
 export function NoResults({ hasFilters }: Props) {
-  const router = useRouter();
-  const t = useI18n();
+	const router = useRouter();
+	const t = useI18n();
 
-  return (
-    <div className="mt-24 flex items-center justify-center">
-      <div className="flex flex-col items-center">
-        <Users className="mb-4 h-12 w-12 text-muted-foreground" />
-        <div className="text-center mb-6 space-y-2">
-          <h2 className="font-medium text-lg">
-            {t("people.empty.no_results.title")}
-          </h2>
-          <p className="text-muted-foreground text-sm">
-            {hasFilters
-              ? t("people.empty.no_results.description_with_filters")
-              : t("people.empty.no_results.description")}
-          </p>
-        </div>
+	return (
+		<div className="mt-24 flex items-center justify-center">
+			<div className="flex flex-col items-center">
+				<Users className="mb-4 h-12 w-12 text-muted-foreground" />
+				<div className="text-center mb-6 space-y-2">
+					<h2 className="font-medium text-lg">
+						{t("people.empty.no_results.title")}
+					</h2>
+					<p className="text-muted-foreground text-sm">
+						{hasFilters
+							? t("people.empty.no_results.description_with_filters")
+							: t("people.empty.no_results.description")}
+					</p>
+				</div>
 
-        {hasFilters && (
-          <Button variant="outline" onClick={() => router.push("/people")}>
-            {t("people.actions.clear")}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
+				{hasFilters && (
+					<Button variant="outline" onClick={() => router.push("/people")}>
+						{t("people.actions.clear")}
+					</Button>
+				)}
+			</div>
+		</div>
+	);
 }
 
 export function NoEmployees() {
-  const t = useI18n();
-  const [open, setOpen] = useQueryState("invite-user-sheet");
+	const t = useI18n();
+	const [open, setOpen] = useQueryState("invite-user-sheet");
 
-  return (
-    <div className="mt-24 absolute w-full top-0 left-0 flex items-center justify-center z-20">
-      <div className="text-center max-w-sm mx-auto flex flex-col items-center justify-center">
-        <Users className="mb-4 h-12 w-12 text-muted-foreground" />
-        <h2 className="text-xl font-medium mb-2">
-          {t("people.empty.no_employees.title")}
-        </h2>
-        <p className="text-sm text-muted-foreground mb-6">
-          {t("people.empty.no_employees.description")}
-        </p>
-        <Button onClick={() => setOpen("true")} className="flex">
-          <Plus className="h-4 w-4 mr-2" />
-          {t("people.actions.invite")}
-        </Button>
-      </div>
+	return (
+		<div className="mt-24 absolute w-full top-0 left-0 flex items-center justify-center z-20">
+			<div className="text-center max-w-sm mx-auto flex flex-col items-center justify-center">
+				<Users className="mb-4 h-12 w-12 text-muted-foreground" />
+				<h2 className="text-xl font-medium mb-2">
+					{t("people.empty.no_employees.title")}
+				</h2>
+				<p className="text-sm text-muted-foreground mb-6">
+					{t("people.empty.no_employees.description")}
+				</p>
+				<Button onClick={() => setOpen("true")} className="flex">
+					<Plus className="h-4 w-4 mr-2" />
+					{t("people.actions.invite")}
+				</Button>
+			</div>
 
-      <InviteUserSheet />
-    </div>
-  );
+			<EmployeeInviteSheet />
+		</div>
+	);
 }
diff --git a/apps/app/src/components/tables/people/filter-toolbar.tsx b/apps/app/src/components/tables/people/filter-toolbar.tsx
index 30d84b81f9..8dbec46ae5 100644
--- a/apps/app/src/components/tables/people/filter-toolbar.tsx
+++ b/apps/app/src/components/tables/people/filter-toolbar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { InviteUserSheet } from "@/components/sheets/invite-user-sheet";
+import { EmployeeInviteSheet } from "@/components/sheets/invite-user-sheet";
 import { useI18n } from "@/locales/client";
 import { Button } from "@bubba/ui/button";
 import { Input } from "@bubba/ui/input";
@@ -11,94 +11,94 @@ import { useCallback, useEffect, useState, useTransition } from "react";
 import { useDebounce } from "use-debounce";
 
 interface FilterToolbarProps {
-  isEmpty?: boolean;
+	isEmpty?: boolean;
 }
 
 export function FilterToolbar({ isEmpty }: FilterToolbarProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const t = useI18n();
-  const [open, setOpen] = useQueryState("invite-user-sheet");
-  const [isPending, startTransition] = useTransition();
-  const [inputValue, setInputValue] = useState(
-    searchParams?.get("search") ?? "",
-  );
+	const router = useRouter();
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const t = useI18n();
+	const [open, setOpen] = useQueryState("invite-user-sheet");
+	const [isPending, startTransition] = useTransition();
+	const [inputValue, setInputValue] = useState(
+		searchParams?.get("search") ?? "",
+	);
 
-  const createQueryString = useCallback(
-    (params: Record<string, string | null>) => {
-      const newSearchParams = new URLSearchParams(searchParams?.toString());
+	const createQueryString = useCallback(
+		(params: Record<string, string | null>) => {
+			const newSearchParams = new URLSearchParams(searchParams?.toString());
 
-      for (const [key, value] of Object.entries(params)) {
-        if (value === null) {
-          newSearchParams.delete(key);
-        } else {
-          newSearchParams.set(key, value);
-        }
-      }
+			for (const [key, value] of Object.entries(params)) {
+				if (value === null) {
+					newSearchParams.delete(key);
+				} else {
+					newSearchParams.set(key, value);
+				}
+			}
 
-      return newSearchParams.toString();
-    },
-    [searchParams],
-  );
+			return newSearchParams.toString();
+		},
+		[searchParams],
+	);
 
-  const [debouncedValue] = useDebounce(inputValue, 300);
+	const [debouncedValue] = useDebounce(inputValue, 300);
 
-  useEffect(() => {
-    startTransition(() => {
-      router.push(
-        `${pathname}?${createQueryString({
-          search: debouncedValue || null,
-          page: null,
-        })}`,
-      );
-    });
-  }, [debouncedValue, createQueryString, pathname, router]);
+	useEffect(() => {
+		startTransition(() => {
+			router.push(
+				`${pathname}?${createQueryString({
+					search: debouncedValue || null,
+					page: null,
+				})}`,
+			);
+		});
+	}, [debouncedValue, createQueryString, pathname, router]);
 
-  return (
-    <div className="flex flex-row items-center justify-between gap-2 mb-4">
-      <div className="flex flex-1 items-center gap-2 min-w-0">
-        <div className="relative flex-1 md:max-w-sm">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder={t("people.filters.search")}
-            className="pl-8"
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-          />
-        </div>
+	return (
+		<div className="flex flex-row items-center justify-between gap-2 mb-4">
+			<div className="flex flex-1 items-center gap-2 min-w-0">
+				<div className="relative flex-1 md:max-w-sm">
+					<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+					<Input
+						placeholder={t("people.filters.search")}
+						className="pl-8"
+						value={inputValue}
+						onChange={(e) => setInputValue(e.target.value)}
+					/>
+				</div>
 
-        <div className="md:hidden">
-          <Button onClick={() => setOpen("true")} variant="action">
-            <Plus className="h-4 w-4" />
-            {t("common.actions.addNew")}
-          </Button>
-        </div>
-      </div>
+				<div className="md:hidden">
+					<Button onClick={() => setOpen("true")} variant="action">
+						<Plus className="h-4 w-4" />
+						{t("common.actions.addNew")}
+					</Button>
+				</div>
+			</div>
 
-      <div className="hidden md:flex items-center gap-2">
-        {inputValue && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => {
-              setInputValue("");
-              router.push(pathname);
-            }}
-            disabled={isPending}
-          >
-            <X className="h-4 w-4 mr-2" />
-            {t("common.actions.clear")}
-          </Button>
-        )}
+			<div className="hidden md:flex items-center gap-2">
+				{inputValue && (
+					<Button
+						variant="ghost"
+						size="sm"
+						onClick={() => {
+							setInputValue("");
+							router.push(pathname);
+						}}
+						disabled={isPending}
+					>
+						<X className="h-4 w-4 mr-2" />
+						{t("common.actions.clear")}
+					</Button>
+				)}
 
-        <Button onClick={() => setOpen("true")} variant="action">
-          <Plus className="h-4 w-4" />
-          {t("common.actions.addNew")}
-        </Button>
-      </div>
+				<Button onClick={() => setOpen("true")} variant="action">
+					<Plus className="h-4 w-4" />
+					{t("common.actions.addNew")}
+				</Button>
+			</div>
 
-      <InviteUserSheet />
-    </div>
-  );
+			<EmployeeInviteSheet />
+		</div>
+	);
 }
diff --git a/yarn.lock b/yarn.lock
index 539770b96a..c982a4d35f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1053,6 +1053,7 @@
   resolved "workspace:packages/db"
   devDependencies:
     "@bubba/tsconfig" "workspace:*"
+  devDependencies:
     typescript "^5.8.2"
   dependencies:
     "@auth/prisma-adapter" "^2.8.0"