From 197259a81aee85ac27cb083458234cb387695bba Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Sat, 5 Apr 2025 16:09:51 -0400
Subject: [PATCH 1/2] refactor: enhance vendor and risk components

- Refactored SelectAssignee component for improved modularity and reusability across vendor and risk forms.
- Updated various forms to utilize the new SelectAssignee component, ensuring consistent UI and functionality.
- Improved code formatting and structure for better readability and maintainability.
- Added loading states for vendor and risk overview pages to enhance user experience during data fetching.
---
 .../[evidenceId]/components/ReviewSection.tsx | 232 +++----
 .../frameworks/components/FrameworkCard.tsx   | 307 +++++-----
 .../[orgId]/risk/(overview)/RisksTable.tsx    | 106 ++--
 .../components/table/RiskColumns.tsx          | 156 +++--
 .../{controls => risk/(overview)}/loading.tsx |   4 -
 .../[orgId]/risk/(overview)/page.tsx          |  13 +-
 .../[orgId]/risk/[riskId]/page.tsx            | 412 ++++++-------
 .../(dashboard)/[orgId]/settings/page.tsx     |  72 +--
 .../(overview)/components/VendorColumns.tsx   | 164 ++---
 .../(overview)/components/VendorsTable.tsx    | 103 ++--
 .../[orgId]/vendors/(overview)/loading.tsx    |  21 +
 .../[orgId]/vendors/(overview)/page.tsx       | 272 +++++----
 .../update-secondary-fields-form.tsx          | 320 +++++-----
 .../tasks/create-vendor-task-form.tsx         | 361 ++++++-----
 .../secondary-fields/secondary-fields.tsx     | 424 ++++++-------
 .../components/title/update-task-sheet.tsx    | 478 +++++++--------
 .../vendors/components/create-vendor-form.tsx | 568 +++++++++---------
 .../components/SelectAssignee.tsx             |   0
 .../organization/delete-organization.tsx      |   2 +-
 .../organization/update-organization-name.tsx |   2 +-
 .../forms/policies/UpdatePolicyOverview.tsx   | 544 ++++++++---------
 .../forms/risks/create-risk-form.tsx          | 486 +++++++--------
 .../components/forms/risks/risk-overview.tsx  | 397 ++++++------
 packages/ui/src/components/card.tsx           |   2 +-
 24 files changed, 2754 insertions(+), 2692 deletions(-)
 rename apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/{controls => risk/(overview)}/loading.tsx (84%)
 create mode 100644 apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/loading.tsx
 rename apps/app/src/{app/[locale]/(app)/(dashboard)/[orgId] => }/components/SelectAssignee.tsx (100%)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/[evidenceId]/components/ReviewSection.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/[evidenceId]/components/ReviewSection.tsx
index 16dd811812..09a295e913 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/[evidenceId]/components/ReviewSection.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/[evidenceId]/components/ReviewSection.tsx
@@ -2,13 +2,13 @@
 
 import { calculateNextReview } from "@/lib/utils/calculate-next-review";
 import type {
-	Departments,
-	Evidence,
-	EvidenceStatus,
-	Frequency,
-	Member,
-	User,
-	User as UserType,
+  Departments,
+  Evidence,
+  EvidenceStatus,
+  Frequency,
+  Member,
+  User,
+  User as UserType,
 } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
@@ -21,130 +21,130 @@ import { EvidenceDepartmentSection } from "./EvidenceDepartmentSection";
 import { EvidenceFrequencySection } from "./EvidenceFrequencySection";
 import { EvidenceNextReviewSection } from "./EvidenceNextReviewSection";
 import { EvidenceStatusSection } from "./EvidenceStatusSection";
-import { SelectAssignee } from "../../../components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 
 interface ReviewSectionProps {
-	evidence: Evidence & {
-		assignee?:
-			| (Member & {
-					user: User;
-			  })
-			| null;
-	};
-	lastPublishedAt: Date | null;
-	frequency: Frequency | null;
-	department: Departments;
-	currentAssigneeId: string | null | undefined;
-	assignees: (Member & {
-		user: UserType;
-	})[];
+  evidence: Evidence & {
+    assignee?:
+    | (Member & {
+      user: User;
+    })
+    | null;
+  };
+  lastPublishedAt: Date | null;
+  frequency: Frequency | null;
+  department: Departments;
+  currentAssigneeId: string | null | undefined;
+  assignees: (Member & {
+    user: UserType;
+  })[];
 }
 
 export function ReviewSection({
-	lastPublishedAt,
-	frequency: initialFrequency,
-	department: initialDepartment,
-	currentAssigneeId,
-	evidence,
-	assignees,
+  lastPublishedAt,
+  frequency: initialFrequency,
+  department: initialDepartment,
+  currentAssigneeId,
+  evidence,
+  assignees,
 }: ReviewSectionProps) {
-	const reviewInfo = calculateNextReview(lastPublishedAt, initialFrequency);
+  const reviewInfo = calculateNextReview(lastPublishedAt, initialFrequency);
 
-	// State for tracking form values
-	const [frequency, setFrequency] = useState<Frequency | null>(
-		initialFrequency,
-	);
-	const [department, setDepartment] = useState<Departments>(initialDepartment);
-	const [assigneeId, setAssigneeId] = useState<string | null>(
-		currentAssigneeId || null,
-	);
-	const [status, setStatus] = useState<EvidenceStatus>(
-		evidence.status || "draft",
-	);
-	const [isSaving, setIsSaving] = useState(false);
+  // State for tracking form values
+  const [frequency, setFrequency] = useState<Frequency | null>(
+    initialFrequency,
+  );
+  const [department, setDepartment] = useState<Departments>(initialDepartment);
+  const [assigneeId, setAssigneeId] = useState<string | null>(
+    currentAssigneeId || null,
+  );
+  const [status, setStatus] = useState<EvidenceStatus>(
+    evidence.status || "draft",
+  );
+  const [isSaving, setIsSaving] = useState(false);
 
-	const { execute: updateDetailsAction } = useAction(updateEvidenceDetails, {
-		onSuccess: async () => {
-			toast.success("Evidence details updated successfully");
-			setIsSaving(false);
-		},
-		onError: () => {
-			toast.error("Failed to update evidence details");
-			setIsSaving(false);
-		},
-	});
+  const { execute: updateDetailsAction } = useAction(updateEvidenceDetails, {
+    onSuccess: async () => {
+      toast.success("Evidence details updated successfully");
+      setIsSaving(false);
+    },
+    onError: () => {
+      toast.error("Failed to update evidence details");
+      setIsSaving(false);
+    },
+  });
 
-	const handleSaveChanges = () => {
-		setIsSaving(true);
-		updateDetailsAction({
-			id: evidence.id,
-			frequency,
-			department,
-			assigneeId,
-			status,
-		});
-	};
+  const handleSaveChanges = () => {
+    setIsSaving(true);
+    updateDetailsAction({
+      id: evidence.id,
+      frequency,
+      department,
+      assigneeId,
+      status,
+    });
+  };
 
-	const handleDepartmentChange = (value: Departments) => {
-		setDepartment(value);
-	};
+  const handleDepartmentChange = (value: Departments) => {
+    setDepartment(value);
+  };
 
-	const handleStatusChange = (value: EvidenceStatus) => {
-		setStatus(value);
-	};
+  const handleStatusChange = (value: EvidenceStatus) => {
+    setStatus(value);
+  };
 
-	return (
-		<Card className="overflow-hidden">
-			<CardHeader>
-				<CardTitle className="text-base flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
-					<div>
-						<h2 className="text-lg font-medium">{evidence.name}</h2>
-						<h3 className="text-sm text-muted-foreground">
-							{evidence.description}
-						</h3>
-					</div>
-				</CardTitle>
-			</CardHeader>
-			<CardContent className="flex flex-col gap-4 pt-2">
-				<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
-					<SelectAssignee
-						assignees={assignees}
-						onAssigneeChange={setAssigneeId}
-						assigneeId={assigneeId}
-						disabled={isSaving}
-					/>
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader>
+        <CardTitle className="text-base flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-medium">{evidence.name}</h2>
+            <h3 className="text-sm text-muted-foreground">
+              {evidence.description}
+            </h3>
+          </div>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4 pt-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-8">
+          <SelectAssignee
+            assignees={assignees}
+            onAssigneeChange={setAssigneeId}
+            assigneeId={assigneeId}
+            disabled={isSaving}
+          />
 
-					<EvidenceStatusSection
-						status={status}
-						handleStatusChange={handleStatusChange}
-						isSaving={isSaving}
-					/>
+          <EvidenceStatusSection
+            status={status}
+            handleStatusChange={handleStatusChange}
+            isSaving={isSaving}
+          />
 
-					<EvidenceDepartmentSection
-						onDepartmentChange={handleDepartmentChange}
-						department={department}
-						disabled={isSaving}
-					/>
+          <EvidenceDepartmentSection
+            onDepartmentChange={handleDepartmentChange}
+            department={department}
+            disabled={isSaving}
+          />
 
-					<EvidenceFrequencySection
-						onFrequencyChange={setFrequency}
-						frequency={frequency}
-						disabled={isSaving}
-					/>
+          <EvidenceFrequencySection
+            onFrequencyChange={setFrequency}
+            frequency={frequency}
+            disabled={isSaving}
+          />
 
-					<EvidenceNextReviewSection reviewInfo={reviewInfo} />
-				</div>
+          <EvidenceNextReviewSection reviewInfo={reviewInfo} />
+        </div>
 
-				<Button
-					size="sm"
-					onClick={handleSaveChanges}
-					disabled={isSaving}
-					className="self-end"
-				>
-					<Save className="h-4 w-4 mr-2" />
-					Save
-				</Button>
-			</CardContent>
-		</Card>
-	);
+        <Button
+          size="sm"
+          onClick={handleSaveChanges}
+          disabled={isSaving}
+          className="self-end"
+        >
+          <Save className="h-4 w-4 mr-2" />
+          Save
+        </Button>
+      </CardContent>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/components/FrameworkCard.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/components/FrameworkCard.tsx
index 682313cace..6ab1c6c698 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/components/FrameworkCard.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/components/FrameworkCard.tsx
@@ -3,7 +3,7 @@
 import { useI18n } from "@/locales/client";
 import type { FrameworkInstance } from "@comp/db/types";
 import { Badge } from "@comp/ui/badge";
-import { Card, CardContent, CardFooter } from "@comp/ui/card";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@comp/ui/card";
 import { cn } from "@comp/ui/cn";
 import { Progress } from "@comp/ui/progress";
 import { ClipboardCheck, ClipboardList, Clock, TrendingUp } from "lucide-react";
@@ -13,172 +13,171 @@ import { getFrameworkDetails } from "../lib/getFrameworkDetails";
 import { FrameworkInstanceWithControls } from "../types";
 
 interface FrameworkCardProps {
-	frameworkInstance: FrameworkInstanceWithControls;
-	complianceScore: number;
+  frameworkInstance: FrameworkInstanceWithControls;
+  complianceScore: number;
 }
 
 export function FrameworkCard({
-	frameworkInstance,
-	complianceScore,
+  frameworkInstance,
+  complianceScore,
 }: FrameworkCardProps) {
-	const { orgId } = useParams<{ orgId: string }>();
-	const t = useI18n();
+  const { orgId } = useParams<{ orgId: string }>();
+  const t = useI18n();
 
-	const getComplianceColor = (score: number) => {
-		if (score >= 80) return "text-green-500";
-		if (score >= 50) return "text-yellow-500";
-		return "text-red-500";
-	};
+  const getComplianceColor = (score: number) => {
+    if (score >= 80) return "text-green-500";
+    if (score >= 50) return "text-yellow-500";
+    return "text-red-500";
+  };
 
-	const getComplianceProgressColor = (score: number) => {
-		if (score >= 80) return "bg-green-500";
-		if (score >= 50) return "bg-yellow-500";
-		return "bg-red-500";
-	};
+  const getComplianceProgressColor = (score: number) => {
+    if (score >= 80) return "bg-green-500";
+    if (score >= 50) return "bg-yellow-500";
+    return "bg-red-500";
+  };
 
-	const getStatusBadge = (score: number) => {
-		if (score >= 95)
-			return {
-				label: t("common.status.compliant"),
-				color:
-					"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-			};
-		if (score >= 80)
-			return {
-				label: "Nearly Compliant",
-				color:
-					"bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
-			};
-		if (score >= 50)
-			return {
-				label: t("common.status.in_progress"),
-				color:
-					"bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
-			};
-		return {
-			label: "Needs Attention",
-			color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-		};
-	};
+  const getStatusBadge = (score: number) => {
+    if (score >= 95)
+      return {
+        label: t("common.status.compliant"),
+        color:
+          "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
+      };
+    if (score >= 80)
+      return {
+        label: "Nearly Compliant",
+        color:
+          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+      };
+    if (score >= 50)
+      return {
+        label: t("common.status.in_progress"),
+        color:
+          "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+      };
+    return {
+      label: "Needs Attention",
+      color: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+    };
+  };
 
-	const controlsCount = frameworkInstance.controls?.length || 0;
-	const compliantControlsCount = Math.round(
-		(complianceScore / 100) * controlsCount,
-	);
-	const inProgressCount =
-		frameworkInstance.controls?.filter((control) =>
-			control.artifacts.some(
-				(artifact) => artifact.policy || artifact.evidence,
-			),
-		).length || 0;
-	const notStartedCount = controlsCount - inProgressCount;
+  const controlsCount = frameworkInstance.controls?.length || 0;
+  const compliantControlsCount = Math.round(
+    (complianceScore / 100) * controlsCount,
+  );
+  const inProgressCount =
+    frameworkInstance.controls?.filter((control) =>
+      control.artifacts.some(
+        (artifact) => artifact.policy || artifact.evidence,
+      ),
+    ).length || 0;
+  const notStartedCount = controlsCount - inProgressCount;
 
-	const frameworkDetails = getFrameworkDetails(frameworkInstance.frameworkId);
-	const statusBadge = getStatusBadge(complianceScore);
+  const frameworkDetails = getFrameworkDetails(frameworkInstance.frameworkId);
+  const statusBadge = getStatusBadge(complianceScore);
 
-	// Calculate last activity date - use current date as fallback
-	const lastActivityDate = new Date().toLocaleDateString();
+  // Calculate last activity date - use current date as fallback
+  const lastActivityDate = new Date().toLocaleDateString();
 
-	return (
-		<Card className="select-none hover:bg-muted/40 transition-colors duration-200 overflow-hidden">
-			<CardContent className="pt-6">
-				<Link
-					href={`/${orgId}/frameworks/${frameworkInstance.id}`}
-					className="flex flex-col gap-4"
-				>
-					<div className="flex flex-col gap-3">
-						<div className="flex items-start justify-between">
-							<div>
-								<div className="flex items-center gap-2 mb-1">
-									<h2 className="font-medium text-2xl">
-										{frameworkDetails.name}
-									</h2>
-									<Badge variant="outline" className="ml-2 text-xs font-normal">
-										{frameworkDetails.version}
-									</Badge>
-								</div>
-								<p className="text-sm text-muted-foreground line-clamp-2">
-									{frameworkDetails.description}
-								</p>
-							</div>
-							<Badge className={cn("ml-auto", statusBadge.color)}>
-								{statusBadge.label}
-							</Badge>
-						</div>
+  return (
+    <Card className="select-none hover:bg-muted/40 transition-colors duration-200 overflow-hidden">
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          {frameworkDetails.name}
+          <Badge variant="outline" className="ml-2 text-xs font-normal">
+            {frameworkDetails.version}
+          </Badge>
+        </CardTitle>
+        <CardDescription>
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm text-muted-foreground line-clamp-2">
+              {frameworkDetails.description}
+            </p>
+            <Badge className={cn("hidden md:block", statusBadge.color)}>
+              {statusBadge.label}
+            </Badge>
+          </div>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Link
+          href={`/${orgId}/frameworks/${frameworkInstance.id}`}
+          className="flex flex-col gap-4"
+        >
+          <div className="flex flex-col gap-3">
+            <div className="space-y-1.5">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  {t("common.status.title")}
+                </span>
+                <span
+                  className={cn(
+                    "font-medium",
+                    getComplianceColor(complianceScore),
+                  )}
+                >
+                  {complianceScore}%
+                </span>
+              </div>
+              <div className="relative h-2 w-full bg-secondary overflow-hidden">
+                <div
+                  className={cn(
+                    "h-full transition-all",
+                    getComplianceProgressColor(complianceScore),
+                  )}
+                  style={{ width: `${complianceScore}%` }}
+                />
+              </div>
+            </div>
+          </div>
 
-						<div className="space-y-1.5">
-							<div className="flex items-center justify-between text-sm">
-								<span className="text-muted-foreground">
-									{t("common.status.title")}
-								</span>
-								<span
-									className={cn(
-										"font-medium",
-										getComplianceColor(complianceScore),
-									)}
-								>
-									{complianceScore}%
-								</span>
-							</div>
-							<div className="relative h-2 w-full bg-secondary overflow-hidden">
-								<div
-									className={cn(
-										"h-full transition-all",
-										getComplianceProgressColor(complianceScore),
-									)}
-									style={{ width: `${complianceScore}%` }}
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="grid grid-cols-3 gap-4 mt-1">
-						<div className="flex flex-col items-start gap-1 border-r pr-3">
-							<div className="flex items-center text-muted-foreground">
-								<ClipboardList className="h-3.5 w-3.5 mr-1" />
-								<span className="text-xs">
-									{t("frameworks.controls.title")}
-								</span>
-							</div>
-							<p className="font-medium text-sm">
-								{controlsCount} {t("evidence.items")}
-							</p>
-						</div>
-						<div className="flex flex-col items-start gap-1 border-r pr-3">
-							<div className="flex items-center text-muted-foreground">
-								<ClipboardCheck className="h-3.5 w-3.5 mr-1" />
-								<span className="text-xs">
-									{t("frameworks.controls.statuses.completed")}
-								</span>
-							</div>
-							<p className="font-medium text-sm">
-								{compliantControlsCount} / {controlsCount}
-							</p>
-						</div>
-						<div className="flex flex-col items-start gap-1">
-							<div className="flex items-center text-muted-foreground">
-								<Clock className="h-3.5 w-3.5 mr-1" />
-								<span className="text-xs">
-									{t("frameworks.controls.statuses.in_progress")}
-								</span>
-							</div>
-							<p className="font-medium text-sm">
-								{inProgressCount} / {controlsCount}
-							</p>
-						</div>
-					</div>
-				</Link>
-			</CardContent>
-			<CardFooter className="py-3 bg-muted/30 border-t text-xs text-muted-foreground flex justify-between">
-				<div className="flex items-center">
-					<Clock className="h-3.5 w-3.5 mr-1.5" />
-					{t("common.last_updated")}: {lastActivityDate}
-				</div>
-				{/* <div className="flex items-center">
+          <div className="grid grid-cols-3 gap-4 mt-1">
+            <div className="flex flex-col items-start gap-1 border-r pr-3">
+              <div className="flex items-center text-muted-foreground">
+                <ClipboardList className="h-3.5 w-3.5 mr-1" />
+                <span className="text-xs">
+                  {t("frameworks.controls.title")}
+                </span>
+              </div>
+              <p className="font-medium text-sm">
+                {controlsCount} {t("evidence.items")}
+              </p>
+            </div>
+            <div className="flex flex-col items-start gap-1 border-r pr-3">
+              <div className="flex items-center text-muted-foreground">
+                <ClipboardCheck className="h-3.5 w-3.5 mr-1" />
+                <span className="text-xs">
+                  {t("frameworks.controls.statuses.completed")}
+                </span>
+              </div>
+              <p className="font-medium text-sm">
+                {compliantControlsCount} / {controlsCount}
+              </p>
+            </div>
+            <div className="flex flex-col items-start gap-1">
+              <div className="flex items-center text-muted-foreground">
+                <Clock className="h-3.5 w-3.5 mr-1" />
+                <span className="text-xs">
+                  {t("frameworks.controls.statuses.in_progress")}
+                </span>
+              </div>
+              <p className="font-medium text-sm">
+                {inProgressCount} / {controlsCount}
+              </p>
+            </div>
+          </div>
+        </Link>
+      </CardContent>
+      <CardFooter className="text-xs text-muted-foreground flex justify-between">
+        <div className="flex items-center">
+          <Clock className="h-3.5 w-3.5 mr-1.5" />
+          {t("common.last_updated")}: {lastActivityDate}
+        </div>
+        {/* <div className="flex items-center">
 					<TrendingUp className="h-3.5 w-3.5 mr-1.5" />
 					Trend: +5%
 				</div> */}
-			</CardFooter>
-		</Card>
-	);
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/RisksTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/RisksTable.tsx
index c8d9a89b2f..c221559319 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/RisksTable.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/RisksTable.tsx
@@ -7,77 +7,67 @@ import { useDataTable } from "@/hooks/use-data-table";
 import { useI18n } from "@/locales/client";
 import { useSession } from "@/utils/auth-client";
 import type { Member, Risk, User } from "@comp/db/types";
-import { Button } from "@comp/ui/button";
-import { Input } from "@comp/ui/input";
 import { ColumnDef } from "@tanstack/react-table";
-import { Plus } from "lucide-react";
 import { useQueryState } from "nuqs";
 import { useMemo } from "react";
 import { columns as getColumns } from "./components/table/RiskColumns";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 
 // Define the expected structure of a risk with User as assignee
 export type RiskRow = Risk & { assignee: User | null };
 
 export const RisksTable = ({
-	risks,
-	assignees,
+  risks,
+  assignees,
 }: {
-	risks: RiskRow[];
-	assignees: (Member & { user: User })[];
+  risks: RiskRow[];
+  assignees: (Member & { user: User })[];
 }) => {
-	const t = useI18n();
-	const session = useSession();
-	const orgId = session?.data?.session?.activeOrganizationId;
-	const [_, setOpen] = useQueryState("create-risk-sheet");
+  const t = useI18n();
+  const session = useSession();
+  const orgId = session?.data?.session?.activeOrganizationId;
+  const [_, setOpen] = useQueryState("create-risk-sheet");
 
-	// Define columns for risks table
-	const columns = useMemo<ColumnDef<RiskRow>[]>(
-		() => getColumns(orgId ?? ""),
-		[orgId],
-	);
+  // Define columns for risks table
+  const columns = useMemo<ColumnDef<RiskRow>[]>(
+    () => getColumns(orgId ?? ""),
+    [orgId],
+  );
 
-	// Set up the risks table
-	const table = useDataTable({
-		data: risks,
-		columns,
-		pageCount: Math.ceil(risks.length / 10),
-		getRowId: (row) => row.id,
-		initialState: {
-			sorting: [{ id: "title", desc: false }],
-			pagination: {
-				pageSize: 10,
-				pageIndex: 0,
-			},
-		},
-	});
+  // Set up the risks table
+  const table = useDataTable({
+    data: risks,
+    columns,
+    pageCount: Math.ceil(risks.length / 10),
+    getRowId: (row) => row.id,
+    initialState: {
+      pagination: {
+        pageSize: 10,
+        pageIndex: 0,
+      },
+    },
+  });
 
-	const [searchTerm, setSearchTerm] = useQueryState("search", {
-		defaultValue: "",
-	});
+  const [searchTerm, setSearchTerm] = useQueryState("search", {
+    defaultValue: "",
+  });
 
-	return (
-		<>
-			<div className="flex items-center mb-4">
-				<Input
-					placeholder={"Search risks..."}
-					value={searchTerm || ""}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					className="max-w-sm"
-				/>
-				<div className="ml-auto flex gap-2">
-					<DataTableSortList table={table.table} align="end" />
-					<Button onClick={() => setOpen("true")} variant="default" size="sm">
-						<Plus className="h-4 w-4 mr-2" />
-						{t("risk.register.empty.create_risk")}
-					</Button>
-				</div>
-			</div>
-			<DataTable
-				table={table.table}
-				rowClickBasePath={`/${orgId}/risk`}
-				getRowId={(row) => row.id}
-			/>
-			<CreateRiskSheet assignees={assignees} />
-		</>
-	);
+  return (
+    <>
+      <DataTable
+        table={table.table}
+        getRowId={(row) => row.id}
+        rowClickBasePath={`/${orgId}/risk`}
+      >
+        <DataTableToolbar
+          sheet="create-risk-sheet"
+          action="Create Risk"
+          table={table.table}
+        >
+          <DataTableSortList table={table.table} align="end" />
+        </DataTableToolbar>
+      </DataTable>
+      <CreateRiskSheet assignees={assignees} />
+    </>
+  );
 };
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/components/table/RiskColumns.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/components/table/RiskColumns.tsx
index 011e149ebd..037415ceaf 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/components/table/RiskColumns.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/components/table/RiskColumns.tsx
@@ -5,70 +5,100 @@ import type { ColumnDef } from "@tanstack/react-table";
 import { UserIcon } from "lucide-react";
 import Link from "next/link";
 import { RiskRow } from "../../RisksTable";
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
 
 export const columns = (orgId: string): ColumnDef<RiskRow>[] => [
-	{
-		header: "Risk",
-		accessorKey: "title",
-		cell: ({ row }) => {
-			return (
-				<Link href={`/${orgId}/risk/${row.original.id}`}>
-					{row.original.title}
-				</Link>
-			);
-		},
-		sortingFn: (a, b) => {
-			return a.original.title.localeCompare(b.original.title);
-		},
-		enableSorting: true,
-	},
-	{
-		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 }) => {
-			if (!row.original.assignee) {
-				return (
-					<div className="flex items-center gap-2">
-						<div className="flex items-center justify-center h-8 w-8 rounded-full bg-muted">
-							<UserIcon className="h-4 w-4 text-muted-foreground" />
-						</div>
-						<p className="text-sm font-medium text-muted-foreground">None</p>
-					</div>
-				);
-			}
+  {
+    id: "title",
+    accessorKey: "title",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Risk" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <Link href={`/${orgId}/risk/${row.original.id}`}>
+          {row.original.title}
+        </Link>
+      );
+    },
+    meta: {
+      label: "Risk",
+      placeholder: "Search for a risk...",
+      variant: "text",
+    },
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Status" />
+    ),
+    cell: ({ row }) => {
+      return <Status status={row.original.status} />;
+    },
+    meta: {
+      label: "Status",
+    },
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: "department",
+    accessorKey: "department",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Department" />
+    ),
+    cell: ({ row }) => {
+      return (
+        <Badge variant="marketing" className="uppercase w-fit">
+          {row.original.department}
+        </Badge>
+      );
+    },
+    meta: {
+      label: "Department",
+    },
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
+  {
+    id: "assignee",
+    accessorKey: "assignee",
+    header: ({ column }) => (
+      <DataTableColumnHeader column={column} title="Assignee" />
+    ),
+    cell: ({ row }) => {
+      if (!row.original.assignee) {
+        return (
+          <div className="flex items-center gap-2">
+            <div className="flex items-center justify-center h-8 w-8 rounded-full bg-muted">
+              <UserIcon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium text-muted-foreground">None</p>
+          </div>
+        );
+      }
 
-			return (
-				<div className="flex items-center gap-2">
-					<Avatar className="h-8 w-8">
-						<AvatarImage
-							src={row.original.assignee.image || undefined}
-							alt={row.original.assignee.name || ""}
-						/>
-						<AvatarFallback>
-							{row.original.assignee.name?.charAt(0) || "?"}
-						</AvatarFallback>
-					</Avatar>
-					<p className="text-sm font-medium">{row.original.assignee.name}</p>
-				</div>
-			);
-		},
-	},
+      return (
+        <div className="flex items-center gap-2">
+          <Avatar className="h-8 w-8">
+            <AvatarImage
+              src={row.original.assignee.image || undefined}
+              alt={row.original.assignee.name || ""}
+            />
+            <AvatarFallback>
+              {row.original.assignee.name?.charAt(0) || "?"}
+            </AvatarFallback>
+          </Avatar>
+          <p className="text-sm font-medium">{row.original.assignee.name}</p>
+        </div>
+      );
+    },
+    meta: {
+      label: "Assignee",
+    },
+    enableColumnFilter: true,
+  },
 ];
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/loading.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/loading.tsx
similarity index 84%
rename from apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/loading.tsx
rename to apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/loading.tsx
index b92a5c46ed..393d27755c 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/loading.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/loading.tsx
@@ -12,10 +12,6 @@ export default function Loading() {
             "10rem",
             "30rem",
             "10rem",
-            "10rem",
-            "6rem",
-            "6rem",
-            "6rem",
           ]}
           shrinkZero
         />
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/page.tsx
index 9a78b8b01d..f590dafc2a 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/page.tsx
@@ -16,6 +16,7 @@ export default async function RiskRegisterPage({
   params,
 }: {
   params: Promise<{
+    orgId: string;
     locale: string;
     search: string;
     page: number;
@@ -25,14 +26,14 @@ export default async function RiskRegisterPage({
     assigneeId: string | null;
   }>;
 }) {
-  const { locale, search, page, pageSize, status, department, assigneeId } =
+  const { orgId, locale, search, page, pageSize, status, department, assigneeId } =
     await params;
 
   setStaticParamsLocale(locale);
   const t = await getI18n();
 
   const risks = await getRisks({
-    search: search || "",
+    search: search,
     page: page || 1,
     pageSize: pageSize || 10,
     status: status || null,
@@ -73,9 +74,13 @@ export default async function RiskRegisterPage({
   }
 
   return (
-    <>
+    <PageWithBreadcrumb
+      breadcrumbs={[
+        { label: "Risks", href: `/${orgId}/risk` },
+      ]}
+    >
       <RisksTable risks={risks?.risks || []} assignees={assignees} />
-    </>
+    </PageWithBreadcrumb>
   );
 }
 
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
index 633f13778a..7de52f34c5 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/[riskId]/page.tsx
@@ -14,230 +14,230 @@ import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
 interface PageProps {
-	searchParams: Promise<{
-		search?: string;
-		status?: string;
-		sort?: string;
-		page?: string;
-		per_page?: string;
-	}>;
-	params: Promise<{ riskId: string; locale: string; orgId: string }>;
+  searchParams: Promise<{
+    search?: string;
+    status?: string;
+    sort?: string;
+    page?: string;
+    per_page?: string;
+  }>;
+  params: Promise<{ riskId: string; locale: string; orgId: string }>;
 }
 
 export default async function RiskPage({ searchParams, params }: PageProps) {
-	const { riskId, orgId } = await params;
-	const risk = await getRisk(riskId);
-
-	const assignees = await getAssignees();
-	const t = await getI18n();
-
-	const {
-		search,
-		status,
-		sort,
-		page = "1",
-		per_page = "5",
-	} = await searchParams;
-
-	const columnHeaders = await getServerColumnHeaders();
-	const [column, order] = sort?.split(":") ?? [];
-	const hasFilters = !!(search || status);
-	const { tasks: loadedTasks, total } = await getTasks({
-		riskId,
-		search,
-		status: status as TaskStatus,
-		column,
-		order,
-		page: Number.parseInt(page),
-		per_page: Number.parseInt(per_page),
-	});
-
-	if (!risk) {
-		redirect("/");
-	}
-
-	return (
-		<PageWithBreadcrumb
-			breadcrumbs={[
-				{ label: "Risk", href: `/${orgId}/risk` },
-				{ label: risk.title, current: true },
-			]}
-		>
-			<div className="flex flex-col gap-4">
-				<RiskOverview risk={risk} assignees={assignees} />
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<InherentRiskChart risk={risk} />
-					<ResidualRiskChart risk={risk} />
-				</div>
-			</div>
-		</PageWithBreadcrumb>
-	);
+  const { riskId, orgId } = await params;
+  const risk = await getRisk(riskId);
+
+  const assignees = await getAssignees();
+  const t = await getI18n();
+
+  const {
+    search,
+    status,
+    sort,
+    page = "1",
+    per_page = "5",
+  } = await searchParams;
+
+  const columnHeaders = await getServerColumnHeaders();
+  const [column, order] = sort?.split(":") ?? [];
+  const hasFilters = !!(search || status);
+  const { tasks: loadedTasks, total } = await getTasks({
+    riskId,
+    search,
+    status: status as TaskStatus,
+    column,
+    order,
+    page: Number.parseInt(page),
+    per_page: Number.parseInt(per_page),
+  });
+
+  if (!risk) {
+    redirect("/");
+  }
+
+  return (
+    <PageWithBreadcrumb
+      breadcrumbs={[
+        { label: "Risks", href: `/${orgId}/risk` },
+        { label: risk.title, current: true },
+      ]}
+    >
+      <div className="flex flex-col gap-4">
+        <RiskOverview risk={risk} assignees={assignees} />
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <InherentRiskChart risk={risk} />
+          <ResidualRiskChart risk={risk} />
+        </div>
+      </div>
+    </PageWithBreadcrumb>
+  );
 }
 
 async function getRisk(riskId: string) {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return null;
-	}
-
-	const risk = await db.risk.findUnique({
-		where: {
-			id: riskId,
-			organizationId: session.session.activeOrganizationId,
-		},
-		include: {
-			assignee: {
-				include: {
-					user: true,
-				},
-			},
-		},
-	});
-
-	return risk;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return null;
+  }
+
+  const risk = await db.risk.findUnique({
+    where: {
+      id: riskId,
+      organizationId: session.session.activeOrganizationId,
+    },
+    include: {
+      assignee: {
+        include: {
+          user: true,
+        },
+      },
+    },
+  });
+
+  return risk;
 }
 
 async function getTasks({
-	riskId,
-	search,
-	status,
-	column,
-	order,
-	page = 1,
-	per_page = 10,
+  riskId,
+  search,
+  status,
+  column,
+  order,
+  page = 1,
+  per_page = 10,
 }: {
-	riskId: string;
-	search?: string;
-	status?: TaskStatus;
-	column?: string;
-	order?: string;
-	page?: number;
-	per_page?: number;
+  riskId: string;
+  search?: string;
+  status?: TaskStatus;
+  column?: string;
+  order?: string;
+  page?: number;
+  per_page?: number;
 }) {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return { tasks: [], total: 0 };
-	}
-
-	const skip = (page - 1) * per_page;
-
-	const [tasks, total] = await Promise.all([
-		db.task
-			.findMany({
-				where: {
-					relatedId: riskId,
-					relatedType: "risk",
-					organizationId: session.session.activeOrganizationId,
-					AND: [
-						search
-							? {
-									OR: [
-										{ title: { contains: search, mode: "insensitive" } },
-										{
-											description: { contains: search, mode: "insensitive" },
-										},
-									],
-								}
-							: {},
-						status ? { status } : {},
-					],
-				},
-				orderBy: column
-					? {
-							[column]: order === "asc" ? "asc" : "desc",
-						}
-					: {
-							createdAt: "desc",
-						},
-				skip,
-				take: per_page,
-				include: {
-					assignee: {
-						include: {
-							user: true,
-						},
-					},
-				},
-			})
-			.then((tasks) =>
-				tasks.map(
-					(task): RiskTaskType => ({
-						id: task.id,
-						riskId: task.relatedId,
-						title: task.title,
-						status: task.status,
-						dueDate: task.dueDate.toISOString(),
-						assigneeId: task.assigneeId ?? "",
-						assignee: {
-							name: task.assignee?.user.name ?? "",
-							image: task.assignee?.user.image ?? "",
-						},
-					}),
-				),
-			),
-		db.task.count({
-			where: {
-				relatedId: riskId,
-				relatedType: "risk",
-				organizationId: session.session.activeOrganizationId,
-				AND: [
-					search
-						? {
-								OR: [
-									{ title: { contains: search, mode: "insensitive" } },
-									{ description: { contains: search, mode: "insensitive" } },
-								],
-							}
-						: {},
-					status ? { status } : {},
-				],
-			},
-		}),
-	]);
-
-	return { tasks, total };
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return { tasks: [], total: 0 };
+  }
+
+  const skip = (page - 1) * per_page;
+
+  const [tasks, total] = await Promise.all([
+    db.task
+      .findMany({
+        where: {
+          relatedId: riskId,
+          relatedType: "risk",
+          organizationId: session.session.activeOrganizationId,
+          AND: [
+            search
+              ? {
+                OR: [
+                  { title: { contains: search, mode: "insensitive" } },
+                  {
+                    description: { contains: search, mode: "insensitive" },
+                  },
+                ],
+              }
+              : {},
+            status ? { status } : {},
+          ],
+        },
+        orderBy: column
+          ? {
+            [column]: order === "asc" ? "asc" : "desc",
+          }
+          : {
+            createdAt: "desc",
+          },
+        skip,
+        take: per_page,
+        include: {
+          assignee: {
+            include: {
+              user: true,
+            },
+          },
+        },
+      })
+      .then((tasks) =>
+        tasks.map(
+          (task): RiskTaskType => ({
+            id: task.id,
+            riskId: task.relatedId,
+            title: task.title,
+            status: task.status,
+            dueDate: task.dueDate.toISOString(),
+            assigneeId: task.assigneeId ?? "",
+            assignee: {
+              name: task.assignee?.user.name ?? "",
+              image: task.assignee?.user.image ?? "",
+            },
+          }),
+        ),
+      ),
+    db.task.count({
+      where: {
+        relatedId: riskId,
+        relatedType: "risk",
+        organizationId: session.session.activeOrganizationId,
+        AND: [
+          search
+            ? {
+              OR: [
+                { title: { contains: search, mode: "insensitive" } },
+                { description: { contains: search, mode: "insensitive" } },
+              ],
+            }
+            : {},
+          status ? { status } : {},
+        ],
+      },
+    }),
+  ]);
+
+  return { tasks, total };
 }
 
 async function getAssignees() {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session || !session.session.activeOrganizationId) {
-		return [];
-	}
-
-	const assignees = await db.member.findMany({
-		where: {
-			organizationId: session.session.activeOrganizationId,
-			role: {
-				notIn: ["employee"],
-			},
-		},
-		include: {
-			user: true,
-		},
-	});
-
-	return assignees;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session || !session.session.activeOrganizationId) {
+    return [];
+  }
+
+  const assignees = await db.member.findMany({
+    where: {
+      organizationId: session.session.activeOrganizationId,
+      role: {
+        notIn: ["employee"],
+      },
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  return assignees;
 }
 
 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("risk.risk_overview"),
-	};
+  return {
+    title: t("risk.risk_overview"),
+  };
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/settings/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/settings/page.tsx
index 378edb1d4a..f2c95a0161 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/settings/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/settings/page.tsx
@@ -9,53 +9,53 @@ import { setStaticParamsLocale } from "next-international/server";
 import { headers } from "next/headers";
 
 export default async function OrganizationSettings({
-	params,
+  params,
 }: {
-	params: Promise<{ locale: string }>;
+  params: Promise<{ locale: string }>;
 }) {
-	const { locale } = await params;
-	setStaticParamsLocale(locale);
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
 
-	const organization = await organizationDetails();
+  const organization = await organizationDetails();
 
-	return (
-		<div className="space-y-12">
-			<UpdateOrganizationName organizationName={organization?.name ?? ""} />
-			<DeleteOrganization organizationId={organization?.id ?? ""} />
-		</div>
-	);
+  return (
+    <div className="space-y-12">
+      <UpdateOrganizationName organizationName={organization?.name ?? ""} />
+      <DeleteOrganization organizationId={organization?.id ?? ""} />
+    </div>
+  );
 }
 
 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("sidebar.settings"),
-	};
+  return {
+    title: t("sidebar.settings"),
+  };
 }
 
 const organizationDetails = cache(async () => {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session?.session.activeOrganizationId) {
-		return null;
-	}
-
-	const organization = await db.organization.findUnique({
-		where: { id: session?.session.activeOrganizationId },
-		select: {
-			name: true,
-			id: true,
-		},
-	});
-
-	return organization;
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session.activeOrganizationId) {
+    return null;
+  }
+
+  const organization = await db.organization.findUnique({
+    where: { id: session?.session.activeOrganizationId },
+    select: {
+      name: true,
+      id: true,
+    },
+  });
+
+  return organization;
 });
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorColumns.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorColumns.tsx
index 9532d28329..62e3b1611f 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorColumns.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorColumns.tsx
@@ -5,73 +5,103 @@ import type { ColumnDef } from "@tanstack/react-table";
 import Link from "next/link";
 import type { VendorRegisterTableRow } from "./VendorsTable";
 import { UserIcon } from "lucide-react";
+import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
 
-export const columns = (orgId: string): ColumnDef<VendorRegisterTableRow>[] => [
-	{
-		header: "Vendor",
-		accessorKey: "name",
-		cell: ({ row }) => {
-			return (
-				<Link href={`/${orgId}/vendors/${row.original.id}`}>
-					{row.original.name}
-				</Link>
-			);
-		},
-		sortingFn: (a, b) => {
-			return a.original.name.localeCompare(b.original.name);
-		},
-		enableSorting: true,
-	},
-	{
-		header: "Status",
-		accessorKey: "status",
-		cell: ({ row }) => {
-			return <VendorStatus status={row.original.status} />;
-		},
-	},
-	{
-		header: "Category",
-		accessorKey: "category",
-		cell: ({ row }) => {
-			return (
-				<Badge variant="marketing" className="uppercase w-fit">
-					{row.original.category}
-				</Badge>
-			);
-		},
-	},
-	{
-		header: "Assignee",
-		accessorKey: "assignee",
-		cell: ({ row }) => {
-			// Handle null assignee
-			if (!row.original.assignee) {
-				return (
-					<div className="flex items-center gap-2">
-						<div className="flex items-center justify-center h-8 w-8 rounded-full bg-muted">
-							<UserIcon className="h-4 w-4 text-muted-foreground" />
-						</div>
-						<p className="text-sm font-medium text-muted-foreground">None</p>
-					</div>
-				);
-			}
+export const columns: ColumnDef<VendorRegisterTableRow>[] = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Vendor Name" />;
+    },
+    cell: ({ row }) => {
+      return (
+        <Link href={`/${row.original.organizationId}/vendors/${row.original.id}`}>
+          {row.original.name}
+        </Link>
+      );
+    },
+    meta: {
+      label: "Vendor Name",
+      placeholder: "Search for vendor name...",
+      variant: "text",
+    },
+    enableColumnFilter: true,
+  },
+  {
+    id: "status",
+    accessorKey: "status",
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Status" />;
+    },
+    cell: ({ row }) => {
+      return <VendorStatus status={row.original.status} />;
+    },
+    meta: {
+      label: "Status",
+      placeholder: "Search by status...",
+      variant: "select",
+    },
+  },
+  {
+    id: "category",
+    accessorKey: "category",
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Category" />;
+    },
+    cell: ({ row }) => {
+      return (
+        <Badge variant="marketing" className="uppercase w-fit">
+          {row.original.category}
+        </Badge>
+      );
+    },
+    meta: {
+      label: "Category",
+      placeholder: "Search by category...",
+      variant: "select",
+    },
+  },
+  {
+    id: "assignee",
+    accessorKey: "assignee",
+    header: ({ column }) => {
+      return <DataTableColumnHeader column={column} title="Assignee" />;
+    },
+    cell: ({ row }) => {
+      // Handle null assignee
+      if (!row.original.assignee) {
+        return (
+          <div className="flex items-center gap-2">
+            <div className="flex items-center justify-center h-8 w-8 rounded-full bg-muted">
+              <UserIcon className="h-4 w-4 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium text-muted-foreground">None</p>
+          </div>
+        );
+      }
 
-			return (
-				<div className="flex items-center gap-2">
-					<Avatar className="h-8 w-8">
-						<AvatarImage
-							src={row.original.assignee.user.image || undefined}
-							alt={row.original.assignee.user.name || ""}
-						/>
-						<AvatarFallback>
-							{row.original.assignee.user.name?.charAt(0) || "?"}
-						</AvatarFallback>
-					</Avatar>
-					<p className="text-sm font-medium">
-						{row.original.assignee.user.name}
-					</p>
-				</div>
-			);
-		},
-	},
+      return (
+        <div className="flex items-center gap-2">
+          <Avatar className="h-8 w-8">
+            <AvatarImage
+              src={row.original.assignee.user.image || undefined}
+              alt={row.original.assignee.user.name || ""}
+            />
+            <AvatarFallback>
+              {row.original.assignee.user.name?.charAt(0) || "?"}
+            </AvatarFallback>
+          </Avatar>
+          <p className="text-sm font-medium">
+            {row.original.assignee.user.name}
+          </p>
+        </div>
+      );
+    },
+    meta: {
+      label: "Assignee",
+      placeholder: "Search by assignee...",
+      variant: "select",
+    },
+  },
 ];
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorsTable.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorsTable.tsx
index f122c6ea04..8d3643b370 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorsTable.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorsTable.tsx
@@ -4,75 +4,62 @@ import { DataTable } from "@/components/data-table/data-table";
 import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
 import { useDataTable } from "@/hooks/use-data-table";
 import { useI18n } from "@/locales/client";
-import { useSession } from "@/utils/auth-client";
 import type { Member, User, Vendor } from "@comp/db/types";
-import { Button } from "@comp/ui/button";
-import { Input } from "@comp/ui/input";
-import { Plus } from "lucide-react";
 import { useQueryState } from "nuqs";
 import { CreateVendorSheet } from "../../components/create-vendor-sheet";
 import { columns } from "./VendorColumns";
+import { useParams } from "next/navigation";
+import React from "react";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 
 export type VendorRegisterTableRow = Vendor & {
-	assignee: {
-		user: User;
-	} | null;
+  assignee: {
+    user: User;
+  } | null;
 };
 
 export const VendorsTable = ({
-	data,
-	assignees,
+  data,
+  assignees,
 }: {
-	data: VendorRegisterTableRow[];
-	assignees: (Member & { user: User })[];
+  data: VendorRegisterTableRow[];
+  assignees: (Member & { user: User })[];
 }) => {
-	const t = useI18n();
-	const session = useSession();
-	const orgId = session?.data?.session?.activeOrganizationId;
-	const [_, setOpen] = useQueryState("createVendorSheet");
+  const t = useI18n();
+  const { orgId } = useParams();
 
-	// Set up the vendors table
-	const table = useDataTable({
-		data,
-		columns: columns(orgId ?? ""),
-		pageCount: Math.ceil(data.length / 10),
-		getRowId: (row) => row.id,
-		initialState: {
-			sorting: [{ id: "name", desc: false }],
-			pagination: {
-				pageSize: 10,
-				pageIndex: 0,
-			},
-		},
-	});
+  // Set up the vendors table
+  const { table } = useDataTable({
+    data,
+    columns,
+    pageCount: Math.ceil(data.length / 10),
+    getRowId: (row) => row.id,
+    initialState: {
+      pagination: {
+        pageSize: 10,
+        pageIndex: 0,
+      },
+    },
+    shallow: false,
+    clearOnDefault: true,
+  });
 
-	const [searchTerm, setSearchTerm] = useQueryState("search", {
-		defaultValue: "",
-	});
-
-	return (
-		<>
-			<div className="flex items-center mb-4">
-				<Input
-					placeholder={t("vendors.filters.search_placeholder")}
-					value={searchTerm || ""}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					className="max-w-sm"
-				/>
-				<div className="ml-auto flex gap-2">
-					<DataTableSortList table={table.table} align="end" />
-					<Button onClick={() => setOpen("true")} variant="default" size="sm">
-						<Plus className="h-4 w-4 mr-2" />
-						{t("vendors.register.create_new")}
-					</Button>
-				</div>
-			</div>
-			<DataTable
-				table={table.table}
-				rowClickBasePath={`/${orgId}/vendors`}
-				getRowId={(row) => row.id}
-			/>
-			<CreateVendorSheet assignees={assignees} />
-		</>
-	);
+  return (
+    <>
+      <DataTable
+        table={table}
+        getRowId={(row) => row.id}
+        rowClickBasePath={`/${orgId}/vendors`}
+      >
+        <DataTableToolbar
+          table={table}
+          sheet="createVendorSheet"
+          action="Add Vendor"
+        >
+          <DataTableSortList table={table} align="end" />
+        </DataTableToolbar>
+      </DataTable>
+      <CreateVendorSheet assignees={assignees} />
+    </>
+  );
 };
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/loading.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/loading.tsx
new file mode 100644
index 0000000000..393d27755c
--- /dev/null
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/loading.tsx
@@ -0,0 +1,21 @@
+import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
+import { Suspense } from "react";
+
+export default function Loading() {
+  return (
+    <Suspense
+      fallback={
+        <DataTableSkeleton
+          columnCount={3}
+          filterCount={2}
+          cellWidths={[
+            "10rem",
+            "30rem",
+            "10rem",
+          ]}
+          shrinkZero
+        />
+      }
+    />
+  );
+}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/page.tsx
index 2cacd4da6b..2d3a2672dc 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/page.tsx
@@ -15,145 +15,157 @@ import { CreateVendorSheet } from "../components/create-vendor-sheet";
 import { AppOnboarding } from "@/components/app-onboarding";
 
 export default async function Page({
-	searchParams,
-	params,
+  searchParams,
+  params,
 }: {
-	searchParams: Promise<{
-		createVendorSheet?: string;
-		page?: string;
-		pageSize?: string;
-		status?: string;
-		department?: string;
-		assigneeId?: string;
-	}>;
-	params: Promise<{ orgId: string }>;
+  searchParams: Promise<{
+    createVendorSheet?: string;
+    page?: string;
+    pageSize?: string;
+    status?: string;
+    department?: string;
+    assigneeId?: string;
+  }>;
+  params: Promise<{ orgId: string }>;
 }) {
-	const t = await getI18n();
-	const searchParamsSchema = z.object({
-		createVendorSheet: z.string().optional(),
-		page: z.string().regex(/^\d+$/).transform(Number).optional(),
-		pageSize: z.string().regex(/^\d+$/).transform(Number).optional(),
-		status: z.nativeEnum(VendorStatus).optional(),
-		department: z.nativeEnum(Departments).optional(),
-		assigneeId: z.string().uuid().optional(),
-	});
-
-	const result = searchParamsSchema.safeParse(await searchParams);
-	const { orgId } = await params;
-
-	if (!result.success) {
-		console.error("Invalid search params:", result.error);
-		redirect("/vendors/register");
-	}
-
-	const { createVendorSheet, page, pageSize, status, department, assigneeId } =
-		result.data;
-
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session?.session.activeOrganizationId) {
-		redirect("/onboarding");
-	}
-
-	const vendors = await db.vendor.findMany({
-		where: {
-			organizationId: session.session.activeOrganizationId,
-			...(status && { status: status }),
-			...(department && { department: department }),
-			...(assigneeId && { assigneeId: assigneeId }),
-		},
-		include: {
-			assignee: {
-				select: {
-					user: true,
-				},
-			},
-		},
-		skip: page ? (Number(page) - 1) * Number(pageSize || 10) : 0,
-		take: Number(pageSize || 10),
-	});
-
-	const assignees = await getAssignees();
-
-	if (vendors.length === 0) {
-		return (
-			<>
-				<AppOnboarding
-					title={t("app_onboarding.vendors.title")}
-					description={t("app_onboarding.vendors.description")}
-					cta={t("app_onboarding.vendors.cta")}
-					imageSrc="/onboarding/vendor-management.webp"
-					imageAlt="Vendor Management"
-					sheetName="createVendorSheet"
-					faqs={[
-						{
-							questionKey: t("app_onboarding.vendors.faqs.question_1"),
-							answerKey: t("app_onboarding.vendors.faqs.answer_1"),
-						},
-						{
-							questionKey: t("app_onboarding.vendors.faqs.question_2"),
-							answerKey: t("app_onboarding.vendors.faqs.answer_2"),
-						},
-						{
-							questionKey: t("app_onboarding.vendors.faqs.question_3"),
-							answerKey: t("app_onboarding.vendors.faqs.answer_3"),
-						},
-					]}
-				/>
-				<CreateVendorSheet assignees={assignees} />
-			</>
-		);
-	}
-
-	return (
-		<PageWithBreadcrumb
-			breadcrumbs={[
-				{ label: "Vendors", href: `/${orgId}/vendors`, current: true },
-			]}
-		>
-			<VendorsTable assignees={assignees} data={vendors} />
-		</PageWithBreadcrumb>
-	);
+  const t = await getI18n();
+  const { orgId } = await params;
+  const vendors = await getVendors(searchParams);
+  const assignees = await getAssignees();
+
+  if (vendors.length === 0) {
+    return (
+      <>
+        <AppOnboarding
+          title={t("app_onboarding.vendors.title")}
+          description={t("app_onboarding.vendors.description")}
+          cta={t("app_onboarding.vendors.cta")}
+          imageSrc="/onboarding/vendor-management.webp"
+          imageAlt="Vendor Management"
+          sheetName="createVendorSheet"
+          faqs={[
+            {
+              questionKey: t("app_onboarding.vendors.faqs.question_1"),
+              answerKey: t("app_onboarding.vendors.faqs.answer_1"),
+            },
+            {
+              questionKey: t("app_onboarding.vendors.faqs.question_2"),
+              answerKey: t("app_onboarding.vendors.faqs.answer_2"),
+            },
+            {
+              questionKey: t("app_onboarding.vendors.faqs.question_3"),
+              answerKey: t("app_onboarding.vendors.faqs.answer_3"),
+            },
+          ]}
+        />
+        <CreateVendorSheet assignees={assignees} />
+      </>
+    );
+  }
+
+  return (
+    <PageWithBreadcrumb
+      breadcrumbs={[
+        { label: "Vendors", href: `/${orgId}/vendors`, current: true },
+      ]}
+    >
+      <VendorsTable assignees={assignees} data={vendors} />
+    </PageWithBreadcrumb>
+  );
 }
 
 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("vendors.register.title"),
-	};
+  return {
+    title: t("vendors.register.title"),
+  };
 }
 
+const getVendors = cache(async (
+  searchParams: Promise<{
+    createVendorSheet?: string;
+    page?: string;
+    pageSize?: string;
+    status?: string;
+    department?: string;
+    assigneeId?: string;
+  }>,
+) => {
+  const session = await getServersideSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session.activeOrganizationId) {
+    return [];
+  }
+  const searchParamsSchema = z.object({
+    createVendorSheet: z.string().optional(),
+    page: z.string().regex(/^\d+$/).transform(Number).optional(),
+    pageSize: z.string().regex(/^\d+$/).transform(Number).optional(),
+    status: z.nativeEnum(VendorStatus).optional(),
+    department: z.nativeEnum(Departments).optional(),
+    assigneeId: z.string().uuid().optional(),
+  });
+
+  const result = searchParamsSchema.safeParse(await searchParams);
+
+  if (!result.success) {
+    console.error("Invalid search params:", result.error);
+    return [];
+  }
+
+  const { page, pageSize, status, department, assigneeId } = result.data;
+
+  const vendors = await db.vendor.findMany({
+    where: {
+      organizationId: session.session.activeOrganizationId,
+      ...(status && { status: status }),
+      ...(department && { department: department }),
+      ...(assigneeId && { assigneeId: assigneeId }),
+    },
+    include: {
+      assignee: {
+        select: {
+          user: true,
+        },
+      },
+    },
+    skip: page ? (Number(page) - 1) * Number(pageSize || 10) : 0,
+    take: Number(pageSize || 10),
+  });
+
+  return vendors;
+});
+
 const getAssignees = cache(async () => {
-	const {
-		session: { activeOrganizationId },
-	} = await getServersideSession({
-		headers: await headers(),
-	});
-
-	if (!activeOrganizationId) {
-		return [];
-	}
-
-	const assignees = await db.member.findMany({
-		where: {
-			organizationId: activeOrganizationId,
-			role: {
-				notIn: ["employee"],
-			},
-		},
-		include: {
-			user: true,
-		},
-	});
-
-	return assignees;
+  const {
+    session: { activeOrganizationId },
+  } = await getServersideSession({
+    headers: await headers(),
+  });
+
+  if (!activeOrganizationId) {
+    return [];
+  }
+
+  const assignees = await db.member.findMany({
+    where: {
+      organizationId: activeOrganizationId,
+      role: {
+        notIn: ["employee"],
+      },
+    },
+    include: {
+      user: true,
+    },
+  });
+
+  return assignees;
 });
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/secondary-fields/update-secondary-fields-form.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/secondary-fields/update-secondary-fields-form.tsx
index d7ae7d0b42..2316ce93fd 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/secondary-fields/update-secondary-fields-form.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/secondary-fields/update-secondary-fields-form.tsx
@@ -5,19 +5,19 @@ import { useI18n } from "@/locales/client";
 import { Member, VendorCategory, type User, type Vendor } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
@@ -25,164 +25,164 @@ import { useAction } from "next-safe-action/hooks";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import type { z } from "zod";
-import { SelectAssignee } from "../../../../components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { updateVendorSchema } from "../../actions/schema";
 import { updateVendorAction } from "../../actions/update-vendor-action";
 
 export function UpdateSecondaryFieldsForm({
-	vendor,
-	assignees,
+  vendor,
+  assignees,
 }: {
-	vendor: Vendor;
-	assignees: (Member & { user: User })[];
+  vendor: Vendor;
+  assignees: (Member & { user: User })[];
 }) {
-	const t = useI18n();
+  const t = useI18n();
 
-	const updateVendor = useAction(updateVendorAction, {
-		onSuccess: () => {
-			toast.success(t("vendors.form.update_vendor_success"));
-		},
-		onError: () => {
-			toast.error(t("vendors.form.update_vendor_error"));
-		},
-	});
+  const updateVendor = useAction(updateVendorAction, {
+    onSuccess: () => {
+      toast.success(t("vendors.form.update_vendor_success"));
+    },
+    onError: () => {
+      toast.error(t("vendors.form.update_vendor_error"));
+    },
+  });
 
-	const form = useForm<z.infer<typeof updateVendorSchema>>({
-		resolver: zodResolver(updateVendorSchema),
-		defaultValues: {
-			id: vendor.id,
-			name: vendor.name,
-			description: vendor.description,
-			assigneeId: vendor.assigneeId,
-			category: vendor.category,
-			status: vendor.status,
-		},
-	});
+  const form = useForm<z.infer<typeof updateVendorSchema>>({
+    resolver: zodResolver(updateVendorSchema),
+    defaultValues: {
+      id: vendor.id,
+      name: vendor.name,
+      description: vendor.description,
+      assigneeId: vendor.assigneeId,
+      category: vendor.category,
+      status: vendor.status,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof updateVendorSchema>) => {
-		// Explicitly set assigneeId to null if it's an empty string (representing "None")
-		const finalAssigneeId = data.assigneeId === "" ? null : data.assigneeId;
+  const onSubmit = (data: z.infer<typeof updateVendorSchema>) => {
+    // Explicitly set assigneeId to null if it's an empty string (representing "None")
+    const finalAssigneeId = data.assigneeId === "" ? null : data.assigneeId;
 
-		updateVendor.execute({
-			id: data.id,
-			name: data.name,
-			description: data.description,
-			assigneeId: finalAssigneeId, // Use the potentially nulled value
-			category: data.category,
-			status: data.status,
-		});
-	};
+    updateVendor.execute({
+      id: data.id,
+      name: data.name,
+      description: data.description,
+      assigneeId: finalAssigneeId, // Use the potentially nulled value
+      category: data.category,
+      status: data.status,
+    });
+  };
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)}>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<FormField
-						control={form.control}
-						name="assigneeId"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("common.assignee.label")}</FormLabel>
-								<FormControl>
-									<SelectAssignee
-										disabled={updateVendor.status === "executing"}
-										withTitle={false}
-										assignees={assignees}
-										assigneeId={field.value}
-										onAssigneeChange={field.onChange}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="status"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("vendors.form.vendor_status")}</FormLabel>
-								<FormControl>
-									<Select value={field.value} onValueChange={field.onChange}>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t(
-													"vendors.form.vendor_status_placeholder",
-												)}
-											>
-												{field.value && <VendorStatus status={field.value} />}
-											</SelectValue>
-										</SelectTrigger>
-										<SelectContent>
-											{Object.values(VENDOR_STATUS_TYPES).map((status) => (
-												<SelectItem key={status} value={status}>
-													<VendorStatus status={status} />
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="category"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("vendors.form.vendor_category")}</FormLabel>
-								<FormControl>
-									<Select
-										{...field}
-										value={field.value}
-										onValueChange={field.onChange}
-									>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t(
-													"vendors.form.vendor_category_placeholder",
-												)}
-											/>
-										</SelectTrigger>
-										<SelectContent>
-											{Object.values(VendorCategory).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>
-						)}
-					/>
-				</div>
-				<div className="flex justify-end mt-4">
-					<Button
-						type="submit"
-						variant="action"
-						disabled={updateVendor.status === "executing"}
-					>
-						{updateVendor.status === "executing" ? (
-							<Loader2 className="h-4 w-4 animate-spin" />
-						) : (
-							t("common.actions.save")
-						)}
-					</Button>
-				</div>
-			</form>
-		</Form>
-	);
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="assigneeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("common.assignee.label")}</FormLabel>
+                <FormControl>
+                  <SelectAssignee
+                    disabled={updateVendor.status === "executing"}
+                    withTitle={false}
+                    assignees={assignees}
+                    assigneeId={field.value}
+                    onAssigneeChange={field.onChange}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("vendors.form.vendor_status")}</FormLabel>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t(
+                          "vendors.form.vendor_status_placeholder",
+                        )}
+                      >
+                        {field.value && <VendorStatus status={field.value} />}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.values(VENDOR_STATUS_TYPES).map((status) => (
+                        <SelectItem key={status} value={status}>
+                          <VendorStatus status={status} />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="category"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("vendors.form.vendor_category")}</FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t(
+                          "vendors.form.vendor_category_placeholder",
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.values(VendorCategory).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>
+            )}
+          />
+        </div>
+        <div className="flex justify-end mt-4">
+          <Button
+            type="submit"
+            variant="action"
+            disabled={updateVendor.status === "executing"}
+          >
+            {updateVendor.status === "executing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              t("common.actions.save")
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/tasks/create-vendor-task-form.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/tasks/create-vendor-task-form.tsx
index 619d3e064f..1a7639fa10 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/tasks/create-vendor-task-form.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/components/tasks/create-vendor-task-form.tsx
@@ -6,30 +6,24 @@ import { createVendorTaskSchema } from "../../actions/schema";
 import { SelectUser } from "@/components/select-user";
 import { useI18n } from "@/locales/client";
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
 } from "@comp/ui/accordion";
 import { Button } from "@comp/ui/button";
 import { Calendar } from "@comp/ui/calendar";
 import { cn } from "@comp/ui/cn";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Input } from "@comp/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@comp/ui/popover";
-import {
-	Select,
-	SelectContent,
-	SelectTrigger,
-	SelectValue,
-} from "@comp/ui/select";
 import { Textarea } from "@comp/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
@@ -37,189 +31,188 @@ import { ArrowRightIcon, CalendarIcon } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import { useParams } from "next/navigation";
 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 { SelectAssignee } from "../../../../components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { Member, User } from "@comp/db/types";
 
 export function CreateVendorTaskForm({
-	assignees,
+  assignees,
 }: {
-	assignees: (Member & { user: User })[];
+  assignees: (Member & { user: User })[];
 }) {
-	const t = useI18n();
+  const t = useI18n();
 
-	const [_, setCreateVendorTaskSheet] = useQueryState(
-		"create-vendor-task-sheet",
-	);
-	const params = useParams<{ vendorId: string }>();
+  const [_, setCreateVendorTaskSheet] = useQueryState(
+    "create-vendor-task-sheet",
+  );
+  const params = useParams<{ vendorId: string }>();
 
-	const createTask = useAction(createVendorTaskAction, {
-		onSuccess: () => {
-			toast.success(t("risk.tasks.form.success"));
-			setCreateVendorTaskSheet(null);
-		},
-		onError: () => {
-			toast.error(t("risk.tasks.form.error"));
-		},
-	});
+  const createTask = useAction(createVendorTaskAction, {
+    onSuccess: () => {
+      toast.success(t("risk.tasks.form.success"));
+      setCreateVendorTaskSheet(null);
+    },
+    onError: () => {
+      toast.error(t("risk.tasks.form.error"));
+    },
+  });
 
-	const form = useForm<z.infer<typeof createVendorTaskSchema>>({
-		resolver: zodResolver(createVendorTaskSchema),
-		defaultValues: {
-			title: "",
-			description: "",
-			dueDate: new Date(),
-			assigneeId: "",
-			vendorId: params.vendorId,
-		},
-	});
+  const form = useForm<z.infer<typeof createVendorTaskSchema>>({
+    resolver: zodResolver(createVendorTaskSchema),
+    defaultValues: {
+      title: "",
+      description: "",
+      dueDate: new Date(),
+      assigneeId: "",
+      vendorId: params.vendorId,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof createVendorTaskSchema>) => {
-		createTask.execute(data);
-	};
+  const onSubmit = (data: z.infer<typeof createVendorTaskSchema>) => {
+    createTask.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={["task"]}>
-							<AccordionItem value="task">
-								<AccordionTrigger>
-									{t("risk.tasks.form.title")}
-								</AccordionTrigger>
-								<AccordionContent>
-									<div className="space-y-4">
-										<FormField
-											control={form.control}
-											name="title"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("risk.tasks.form.task_title")}
-													</FormLabel>
-													<FormControl>
-														<Input
-															{...field}
-															autoFocus
-															className="mt-3"
-															placeholder={t(
-																"risk.tasks.form.task_title_description",
-															)}
-															autoCorrect="off"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
+          <div>
+            <Accordion type="multiple" defaultValue={["task"]}>
+              <AccordionItem value="task">
+                <AccordionTrigger>
+                  {t("risk.tasks.form.title")}
+                </AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("risk.tasks.form.task_title")}
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              autoFocus
+                              className="mt-3"
+                              placeholder={t(
+                                "risk.tasks.form.task_title_description",
+                              )}
+                              autoCorrect="off"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="description"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("risk.tasks.form.description")}
-													</FormLabel>
-													<FormControl>
-														<Textarea
-															{...field}
-															className="mt-3 min-h-[80px]"
-															placeholder={t(
-																"risk.tasks.form.description_description",
-															)}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("risk.tasks.form.description")}
+                          </FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              className="mt-3 min-h-[80px]"
+                              placeholder={t(
+                                "risk.tasks.form.description_description",
+                              )}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="dueDate"
-											render={({ field }) => (
-												<FormItem className="flex flex-col">
-													<FormLabel>{t("risk.tasks.form.due_date")}</FormLabel>
-													<Popover>
-														<PopoverTrigger asChild>
-															<FormControl>
-																<Button
-																	variant={"outline"}
-																	className={cn(
-																		"w-[240px] pl-3 text-left font-normal",
-																		!field.value && "text-muted-foreground",
-																	)}
-																>
-																	{field.value ? (
-																		format(field.value, "PPP")
-																	) : (
-																		<span>{t("common.date.pick")}</span>
-																	)}
-																	<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-																</Button>
-															</FormControl>
-														</PopoverTrigger>
-														<PopoverContent
-															className="w-auto p-0"
-															align="start"
-														>
-															<Calendar
-																mode="single"
-																selected={field.value}
-																onSelect={field.onChange}
-																disabled={(date) => date <= new Date()}
-																initialFocus
-															/>
-														</PopoverContent>
-													</Popover>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+                    <FormField
+                      control={form.control}
+                      name="dueDate"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-col">
+                          <FormLabel>{t("risk.tasks.form.due_date")}</FormLabel>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <FormControl>
+                                <Button
+                                  variant={"outline"}
+                                  className={cn(
+                                    "w-[240px] pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                  )}
+                                >
+                                  {field.value ? (
+                                    format(field.value, "PPP")
+                                  ) : (
+                                    <span>{t("common.date.pick")}</span>
+                                  )}
+                                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                </Button>
+                              </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent
+                              className="w-auto p-0"
+                              align="start"
+                            >
+                              <Calendar
+                                mode="single"
+                                selected={field.value}
+                                onSelect={field.onChange}
+                                disabled={(date) => date <= new Date()}
+                                initialFocus
+                              />
+                            </PopoverContent>
+                          </Popover>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="assigneeId"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>{t("common.assignee.label")}</FormLabel>
-													<FormControl>
-														<SelectAssignee
-															assignees={assignees}
-															assigneeId={field.value}
-															onAssigneeChange={field.onChange}
-															withTitle={false}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</div>
-								</AccordionContent>
-							</AccordionItem>
-						</Accordion>
-					</div>
+                    <FormField
+                      control={form.control}
+                      name="assigneeId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("common.assignee.label")}</FormLabel>
+                          <FormControl>
+                            <SelectAssignee
+                              assignees={assignees}
+                              assigneeId={field.value}
+                              onAssigneeChange={field.onChange}
+                              withTitle={false}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
 
-					<div className="flex justify-end mt-4">
-						<Button
-							type="submit"
-							variant="action"
-							disabled={createTask.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={createTask.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/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/secondary-fields/secondary-fields.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/secondary-fields/secondary-fields.tsx
index fa238776e9..7c2778680a 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/secondary-fields/secondary-fields.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/secondary-fields/secondary-fields.tsx
@@ -1,26 +1,26 @@
 "use client";
 
-import { SelectAssignee } from "@/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import type { Member, Task, User } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import { Calendar } from "@comp/ui/calendar";
 import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
 import { cn } from "@comp/ui/cn";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Popover, PopoverContent, PopoverTrigger } from "@comp/ui/popover";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
@@ -33,218 +33,218 @@ import { updateVendorTaskSchema } from "../../../../actions/schema";
 import { updateVendorTaskAction } from "../../../../actions/task/update-task-action";
 
 export default function SecondaryFields({
-	task,
-	assignees,
+  task,
+  assignees,
 }: {
-	task: Task & { assignee: { user: User } | null };
-	assignees: (Member & { user: User })[];
+  task: Task & { assignee: { user: User } | null };
+  assignees: (Member & { user: User })[];
 }) {
-	return (
-		<div className="space-y-4">
-			<Card>
-				<CardHeader>
-					<CardTitle>
-						<div className="flex items-center justify-between gap-2">
-							Task Details
-						</div>
-					</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<TaskSecondaryFieldsForm task={task} assignees={assignees} />
-				</CardContent>
-			</Card>
-		</div>
-	);
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <div className="flex items-center justify-between gap-2">
+              Task Details
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TaskSecondaryFieldsForm task={task} assignees={assignees} />
+        </CardContent>
+      </Card>
+    </div>
+  );
 }
 
 function TaskSecondaryFieldsForm({
-	task,
-	assignees,
+  task,
+  assignees,
 }: {
-	task: Task & {
-		assignee: { user: User } | null;
-	};
-	assignees: (Member & { user: User })[];
+  task: Task & {
+    assignee: { user: User } | null;
+  };
+  assignees: (Member & { user: User })[];
 }) {
-	const updateTask = useAction(updateVendorTaskAction, {
-		onSuccess: () => {
-			toast.success("Task updated successfully");
-		},
-		onError: () => {
-			toast.error("Failed to update task");
-		},
-	});
+  const updateTask = useAction(updateVendorTaskAction, {
+    onSuccess: () => {
+      toast.success("Task updated successfully");
+    },
+    onError: () => {
+      toast.error("Failed to update task");
+    },
+  });
 
-	const form = useForm<z.infer<typeof updateVendorTaskSchema>>({
-		resolver: zodResolver(updateVendorTaskSchema),
-		defaultValues: {
-			id: task.id,
-			title: task.title,
-			description: task.description,
-			dueDate: task.dueDate ? new Date(task.dueDate) : undefined,
-			status: task.status,
-			assigneeId: task.assigneeId || null,
-		},
-	});
+  const form = useForm<z.infer<typeof updateVendorTaskSchema>>({
+    resolver: zodResolver(updateVendorTaskSchema),
+    defaultValues: {
+      id: task.id,
+      title: task.title,
+      description: task.description,
+      dueDate: task.dueDate ? new Date(task.dueDate) : undefined,
+      status: task.status,
+      assigneeId: task.assigneeId || null,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof updateVendorTaskSchema>) => {
-		updateTask.execute(data);
-	};
+  const onSubmit = (data: z.infer<typeof updateVendorTaskSchema>) => {
+    updateTask.execute(data);
+  };
 
-	// Function to render status with correct color
-	const renderStatus = (status: string) => {
-		const getStatusColor = (status: string) => {
-			switch (status) {
-				case "open":
-					return "#ffc107"; // yellow/amber
-				case "in_progress":
-					return "#0ea5e9"; // blue
-				case "completed":
-					return "#00DC73"; // green
-				case "cancelled":
-					return "#64748b"; // gray
-				default:
-					return "#64748b";
-			}
-		};
+  // Function to render status with correct color
+  const renderStatus = (status: string) => {
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case "open":
+          return "#ffc107"; // yellow/amber
+        case "in_progress":
+          return "#0ea5e9"; // blue
+        case "completed":
+          return "#00DC73"; // green
+        case "cancelled":
+          return "#64748b"; // gray
+        default:
+          return "#64748b";
+      }
+    };
 
-		return (
-			<div className="flex items-center gap-2">
-				<div
-					className="size-2.5 rounded-full"
-					style={{ backgroundColor: getStatusColor(status) }}
-				/>
-				<span>{status.replace("_", " ")}</span>
-			</div>
-		);
-	};
+    return (
+      <div className="flex items-center gap-2">
+        <div
+          className="size-2.5 rounded-full"
+          style={{ backgroundColor: getStatusColor(status) }}
+        />
+        <span>{status.replace("_", " ")}</span>
+      </div>
+    );
+  };
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)}>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<FormField
-						control={form.control}
-						name="assigneeId"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Assignee</FormLabel>
-								<FormControl>
-									<SelectAssignee
-										assigneeId={field.value}
-										assignees={assignees}
-										onAssigneeChange={field.onChange}
-										disabled={updateTask.status === "executing"}
-										withTitle={false}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="assigneeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Assignee</FormLabel>
+                <FormControl>
+                  <SelectAssignee
+                    assigneeId={field.value}
+                    assignees={assignees}
+                    onAssigneeChange={field.onChange}
+                    disabled={updateTask.status === "executing"}
+                    withTitle={false}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-					<FormField
-						control={form.control}
-						name="status"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>Status</FormLabel>
-								<FormControl>
-									<Select
-										value={field.value}
-										onValueChange={(value) => {
-											field.onChange(value);
-											form.handleSubmit(onSubmit)();
-										}}
-									>
-										<SelectTrigger>
-											<SelectValue placeholder="Select status">
-												{field.value && renderStatus(field.value)}
-											</SelectValue>
-										</SelectTrigger>
-										<SelectContent>
-											<SelectItem value="open">
-												{renderStatus("open")}
-											</SelectItem>
-											<SelectItem value="in_progress">
-												{renderStatus("in_progress")}
-											</SelectItem>
-											<SelectItem value="completed">
-												{renderStatus("completed")}
-											</SelectItem>
-											<SelectItem value="cancelled">
-												{renderStatus("cancelled")}
-											</SelectItem>
-										</SelectContent>
-									</Select>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <FormControl>
+                  <Select
+                    value={field.value}
+                    onValueChange={(value) => {
+                      field.onChange(value);
+                      form.handleSubmit(onSubmit)();
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select status">
+                        {field.value && renderStatus(field.value)}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="open">
+                        {renderStatus("open")}
+                      </SelectItem>
+                      <SelectItem value="in_progress">
+                        {renderStatus("in_progress")}
+                      </SelectItem>
+                      <SelectItem value="completed">
+                        {renderStatus("completed")}
+                      </SelectItem>
+                      <SelectItem value="cancelled">
+                        {renderStatus("cancelled")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
 
-					<FormField
-						control={form.control}
-						name="dueDate"
-						render={({ field }) => (
-							<FormItem className="flex flex-col">
-								<FormLabel>Due Date</FormLabel>
-								<Popover>
-									<PopoverTrigger asChild>
-										<FormControl>
-											<Button
-												variant="outline"
-												className={cn(
-													"w-full pl-3 text-left font-normal",
-													!field.value && "text-muted-foreground",
-												)}
-											>
-												{field.value ? (
-													format(field.value, "PPP")
-												) : (
-													<span>Select a date</span>
-												)}
-												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-											</Button>
-										</FormControl>
-									</PopoverTrigger>
-									<PopoverContent className="w-auto p-0" align="start">
-										<Calendar
-											mode="single"
-											selected={field.value}
-											onSelect={(date) => {
-												field.onChange(date);
-												form.handleSubmit(onSubmit)();
-											}}
-											disabled={(date) =>
-												date < new Date(new Date().setHours(0, 0, 0, 0))
-											}
-											initialFocus
-										/>
-									</PopoverContent>
-								</Popover>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-				</div>
-				<div className="flex justify-end mt-4">
-					<Button
-						type="submit"
-						variant="action"
-						disabled={updateTask.status === "executing"}
-					>
-						{updateTask.status === "executing" ? (
-							<Loader2 className="h-4 w-4 animate-spin" />
-						) : (
-							<div className="flex items-center">
-								Save
-								<ArrowRightIcon className="ml-2 h-4 w-4" />
-							</div>
-						)}
-					</Button>
-				</div>
-			</form>
-		</Form>
-	);
+          <FormField
+            control={form.control}
+            name="dueDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Due Date</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        className={cn(
+                          "w-full pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground",
+                        )}
+                      >
+                        {field.value ? (
+                          format(field.value, "PPP")
+                        ) : (
+                          <span>Select a date</span>
+                        )}
+                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={(date) => {
+                        field.onChange(date);
+                        form.handleSubmit(onSubmit)();
+                      }}
+                      disabled={(date) =>
+                        date < new Date(new Date().setHours(0, 0, 0, 0))
+                      }
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex justify-end mt-4">
+          <Button
+            type="submit"
+            variant="action"
+            disabled={updateTask.status === "executing"}
+          >
+            {updateTask.status === "executing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <div className="flex items-center">
+                Save
+                <ArrowRightIcon className="ml-2 h-4 w-4" />
+              </div>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/title/update-task-sheet.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/title/update-task-sheet.tsx
index 276d48d4c0..e3b52a8bab 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/title/update-task-sheet.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/[vendorId]/tasks/[taskId]/components/title/update-task-sheet.tsx
@@ -1,32 +1,32 @@
 "use client";
 
-import { SelectAssignee } from "@/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import type { Member, Task, User } from "@comp/db/types";
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
 } from "@comp/ui/accordion";
 import { Button } from "@comp/ui/button";
 import { Calendar } from "@comp/ui/calendar";
 import { cn } from "@comp/ui/cn";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Input } from "@comp/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@comp/ui/popover";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { Textarea } from "@comp/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -42,241 +42,241 @@ import { updateVendorTaskSchema } from "../../../../actions/schema";
 import { updateVendorTaskAction } from "../../../../actions/task/update-task-action";
 
 interface UpdateTaskSheetProps {
-	task: Task & { assignee: { user: User } | null };
-	assignees: (Member & { user: User })[];
+  task: Task & { assignee: { user: User } | null };
+  assignees: (Member & { user: User })[];
 }
 
 export function UpdateTaskSheet({ task, assignees }: UpdateTaskSheetProps) {
-	const [_, setTaskOverviewSheet] = useQueryState("task-overview-sheet");
-	const params = useParams<{ taskId: string }>();
+  const [_, setTaskOverviewSheet] = useQueryState("task-overview-sheet");
+  const params = useParams<{ taskId: string }>();
 
-	const updateTask = useAction(updateVendorTaskAction, {
-		onSuccess: () => {
-			toast.success("Task updated successfully");
-			setTaskOverviewSheet(null);
-		},
-		onError: () => {
-			toast.error("Failed to update task");
-		},
-	});
+  const updateTask = useAction(updateVendorTaskAction, {
+    onSuccess: () => {
+      toast.success("Task updated successfully");
+      setTaskOverviewSheet(null);
+    },
+    onError: () => {
+      toast.error("Failed to update task");
+    },
+  });
 
-	const form = useForm<z.infer<typeof updateVendorTaskSchema>>({
-		resolver: zodResolver(updateVendorTaskSchema),
-		defaultValues: {
-			id: params.taskId,
-			title: task.title,
-			description: task.description,
-			dueDate: task.dueDate ? new Date(task.dueDate) : undefined,
-			status: task.status,
-			assigneeId: task.assigneeId || null,
-		},
-	});
+  const form = useForm<z.infer<typeof updateVendorTaskSchema>>({
+    resolver: zodResolver(updateVendorTaskSchema),
+    defaultValues: {
+      id: params.taskId,
+      title: task.title,
+      description: task.description,
+      dueDate: task.dueDate ? new Date(task.dueDate) : undefined,
+      status: task.status,
+      assigneeId: task.assigneeId || null,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof updateVendorTaskSchema>) => {
-		updateTask.execute(data);
-	};
+  const onSubmit = (data: z.infer<typeof updateVendorTaskSchema>) => {
+    updateTask.execute(data);
+  };
 
-	// Function to render status with correct color
-	const renderStatus = (status: string) => {
-		const getStatusColor = (status: string) => {
-			switch (status) {
-				case "open":
-					return "#ffc107"; // yellow/amber
-				case "in_progress":
-					return "#0ea5e9"; // blue
-				case "completed":
-					return "#00DC73"; // green
-				case "cancelled":
-					return "#64748b"; // gray
-				default:
-					return "#64748b";
-			}
-		};
+  // Function to render status with correct color
+  const renderStatus = (status: string) => {
+    const getStatusColor = (status: string) => {
+      switch (status) {
+        case "open":
+          return "#ffc107"; // yellow/amber
+        case "in_progress":
+          return "#0ea5e9"; // blue
+        case "completed":
+          return "#00DC73"; // green
+        case "cancelled":
+          return "#64748b"; // gray
+        default:
+          return "#64748b";
+      }
+    };
 
-		return (
-			<div className="flex items-center gap-2">
-				<div
-					className="size-2.5"
-					style={{ backgroundColor: getStatusColor(status) }}
-				/>
-				<span>{status.replace("_", " ")}</span>
-			</div>
-		);
-	};
+    return (
+      <div className="flex items-center gap-2">
+        <div
+          className="size-2.5"
+          style={{ backgroundColor: getStatusColor(status) }}
+        />
+        <span>{status.replace("_", " ")}</span>
+      </div>
+    );
+  };
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)}>
-				<div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
-					<div>
-						<Accordion type="multiple" defaultValue={["task"]}>
-							<AccordionItem value="task">
-								<AccordionTrigger>Task Details</AccordionTrigger>
-								<AccordionContent>
-									<div className="space-y-4">
-										<FormField
-											control={form.control}
-											name="title"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Title</FormLabel>
-													<FormControl>
-														<Input
-															{...field}
-															autoFocus
-															className="mt-3"
-															placeholder="Enter title"
-															autoCorrect="off"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
+          <div>
+            <Accordion type="multiple" defaultValue={["task"]}>
+              <AccordionItem value="task">
+                <AccordionTrigger>Task Details</AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Title</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              autoFocus
+                              className="mt-3"
+                              placeholder="Enter title"
+                              autoCorrect="off"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="description"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Description</FormLabel>
-													<FormControl>
-														<Textarea
-															{...field}
-															className="mt-3"
-															placeholder="Enter description"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Description</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              className="mt-3"
+                              placeholder="Enter description"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="dueDate"
-											render={({ field }) => (
-												<FormItem className="flex flex-col">
-													<FormLabel>Due Date</FormLabel>
-													<Popover>
-														<PopoverTrigger asChild>
-															<FormControl>
-																<Button
-																	variant="outline"
-																	className={cn(
-																		"w-full pl-3 text-left font-normal",
-																		!field.value && "text-muted-foreground",
-																	)}
-																>
-																	{field.value ? (
-																		format(field.value, "PPP")
-																	) : (
-																		<span>Select a date</span>
-																	)}
-																	<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-																</Button>
-															</FormControl>
-														</PopoverTrigger>
-														<PopoverContent
-															className="w-auto p-0"
-															align="start"
-														>
-															<Calendar
-																mode="single"
-																selected={field.value}
-																onSelect={field.onChange}
-																disabled={(date) =>
-																	date <
-																	new Date(new Date().setHours(0, 0, 0, 0))
-																}
-																initialFocus
-															/>
-														</PopoverContent>
-													</Popover>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+                    <FormField
+                      control={form.control}
+                      name="dueDate"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-col">
+                          <FormLabel>Due Date</FormLabel>
+                          <Popover>
+                            <PopoverTrigger asChild>
+                              <FormControl>
+                                <Button
+                                  variant="outline"
+                                  className={cn(
+                                    "w-full pl-3 text-left font-normal",
+                                    !field.value && "text-muted-foreground",
+                                  )}
+                                >
+                                  {field.value ? (
+                                    format(field.value, "PPP")
+                                  ) : (
+                                    <span>Select a date</span>
+                                  )}
+                                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                                </Button>
+                              </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent
+                              className="w-auto p-0"
+                              align="start"
+                            >
+                              <Calendar
+                                mode="single"
+                                selected={field.value}
+                                onSelect={field.onChange}
+                                disabled={(date) =>
+                                  date <
+                                  new Date(new Date().setHours(0, 0, 0, 0))
+                                }
+                                initialFocus
+                              />
+                            </PopoverContent>
+                          </Popover>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="status"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Status</FormLabel>
-													<FormControl>
-														<Select
-															value={field.value}
-															onValueChange={(value) => {
-																field.onChange(value);
-																form.handleSubmit(onSubmit)();
-															}}
-														>
-															<SelectTrigger>
-																<SelectValue placeholder="Select status">
-																	{field.value && renderStatus(field.value)}
-																</SelectValue>
-															</SelectTrigger>
-															<SelectContent>
-																<SelectItem value="open">
-																	{renderStatus("open")}
-																</SelectItem>
-																<SelectItem value="in_progress">
-																	{renderStatus("in_progress")}
-																</SelectItem>
-																<SelectItem value="completed">
-																	{renderStatus("completed")}
-																</SelectItem>
-																<SelectItem value="cancelled">
-																	{renderStatus("cancelled")}
-																</SelectItem>
-															</SelectContent>
-														</Select>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
+                    <FormField
+                      control={form.control}
+                      name="status"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Status</FormLabel>
+                          <FormControl>
+                            <Select
+                              value={field.value}
+                              onValueChange={(value) => {
+                                field.onChange(value);
+                                form.handleSubmit(onSubmit)();
+                              }}
+                            >
+                              <SelectTrigger>
+                                <SelectValue placeholder="Select status">
+                                  {field.value && renderStatus(field.value)}
+                                </SelectValue>
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="open">
+                                  {renderStatus("open")}
+                                </SelectItem>
+                                <SelectItem value="in_progress">
+                                  {renderStatus("in_progress")}
+                                </SelectItem>
+                                <SelectItem value="completed">
+                                  {renderStatus("completed")}
+                                </SelectItem>
+                                <SelectItem value="cancelled">
+                                  {renderStatus("cancelled")}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
 
-										<FormField
-											control={form.control}
-											name="assigneeId"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Assignee</FormLabel>
-													<FormControl>
-														<SelectAssignee
-															assigneeId={field.value}
-															assignees={assignees}
-															onAssigneeChange={field.onChange}
-															disabled={updateTask.status === "executing"}
-															withTitle={false}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</div>
-								</AccordionContent>
-							</AccordionItem>
-						</Accordion>
-					</div>
+                    <FormField
+                      control={form.control}
+                      name="assigneeId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>Assignee</FormLabel>
+                          <FormControl>
+                            <SelectAssignee
+                              assigneeId={field.value}
+                              assignees={assignees}
+                              onAssigneeChange={field.onChange}
+                              disabled={updateTask.status === "executing"}
+                              withTitle={false}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
 
-					<div className="flex justify-end mt-4">
-						<Button
-							type="submit"
-							variant="action"
-							disabled={updateTask.status === "executing"}
-						>
-							<div className="flex items-center justify-center">
-								Update
-								<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={updateTask.status === "executing"}
+            >
+              <div className="flex items-center justify-center">
+                Update
+                <ArrowRightIcon className="ml-2 h-4 w-4" />
+              </div>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/components/create-vendor-form.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/components/create-vendor-form.tsx
index a2732937ab..ad47988ce0 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/components/create-vendor-form.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/components/create-vendor-form.tsx
@@ -4,27 +4,27 @@ import { useI18n } from "@/locales/client";
 import { useSession } from "@/utils/auth-client";
 import { Member, User, VendorCategory, VendorStatus } from "@comp/db/types";
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
 } from "@comp/ui/accordion";
 import { Button } from "@comp/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Input } from "@comp/ui/input";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { Textarea } from "@comp/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -35,290 +35,290 @@ import { useQueryState } from "nuqs";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
-import { SelectAssignee } from "../../components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { createVendorAction } from "../actions/create-vendor-action";
 
 const createVendorSchema = z.object({
-	name: z.string().min(1, "Name is required"),
-	website: z.string().url("Must be a valid URL").optional(),
-	description: z.string().optional(),
-	category: z.nativeEnum(VendorCategory),
-	status: z.nativeEnum(VendorStatus).default(VendorStatus.not_assessed),
-	assigneeId: z.string().optional(),
+  name: z.string().min(1, "Name is required"),
+  website: z.string().url("Must be a valid URL").optional(),
+  description: z.string().optional(),
+  category: z.nativeEnum(VendorCategory),
+  status: z.nativeEnum(VendorStatus).default(VendorStatus.not_assessed),
+  assigneeId: z.string().optional(),
 });
 
 export function CreateVendorForm({
-	assignees,
+  assignees,
 }: { assignees: (Member & { user: User })[] }) {
-	const t = useI18n();
-	const session = useSession();
+  const t = useI18n();
+  const session = useSession();
 
-	// 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<VendorStatus | null>("status", {
-		defaultValue: null,
-		parse: (value) => value as VendorStatus | null,
-	});
-	const [category] = useQueryState<VendorCategory | null>("category", {
-		defaultValue: null,
-		parse: (value) => value as VendorCategory | null,
-	});
-	const [assigneeId] = useQueryState<string | null>("assigneeId", {
-		defaultValue: null,
-		parse: (value) => value,
-	});
+  // 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<VendorStatus | null>("status", {
+    defaultValue: null,
+    parse: (value) => value as VendorStatus | null,
+  });
+  const [category] = useQueryState<VendorCategory | null>("category", {
+    defaultValue: null,
+    parse: (value) => value as VendorCategory | null,
+  });
+  const [assigneeId] = useQueryState<string | null>("assigneeId", {
+    defaultValue: null,
+    parse: (value) => value,
+  });
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const createVendor = useAction(createVendorAction, {
-		onSuccess: async (data) => {
-			const organizationId = session.data?.session.activeOrganizationId;
+  const createVendor = useAction(createVendorAction, {
+    onSuccess: async (data) => {
+      const organizationId = session.data?.session.activeOrganizationId;
 
-			if (!organizationId) {
-				toast.error(t("vendors.form.create_vendor_error"));
-				return;
-			}
+      if (!organizationId) {
+        toast.error(t("vendors.form.create_vendor_error"));
+        return;
+      }
 
-			toast.success(t("vendors.form.create_vendor_success"));
+      toast.success(t("vendors.form.create_vendor_success"));
 
-			router.push(`/${organizationId}/vendors/${data.data?.data?.id}`);
-		},
-		onError: () => {
-			toast.error(t("vendors.form.create_vendor_error"));
-		},
-	});
+      router.push(`/${organizationId}/vendors/${data.data?.data?.id}`);
+    },
+    onError: () => {
+      toast.error(t("vendors.form.create_vendor_error"));
+    },
+  });
 
-	const form = useForm<z.infer<typeof createVendorSchema>>({
-		resolver: zodResolver(createVendorSchema),
-		defaultValues: {
-			name: "",
-			description: "",
-			category: VendorCategory.cloud,
-			status: VendorStatus.not_assessed,
-		},
-	});
+  const form = useForm<z.infer<typeof createVendorSchema>>({
+    resolver: zodResolver(createVendorSchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      category: VendorCategory.cloud,
+      status: VendorStatus.not_assessed,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof createVendorSchema>) => {
-		createVendor.execute(data);
-	};
+  const onSubmit = (data: z.infer<typeof createVendorSchema>) => {
+    createVendor.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={["vendor"]}>
-							<AccordionItem value="vendor">
-								<AccordionTrigger>
-									{t("vendors.form.vendor_details")}
-								</AccordionTrigger>
-								<AccordionContent>
-									<div className="space-y-4">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>{t("vendors.form.vendor_name")}</FormLabel>
-													<FormControl>
-														<Input
-															{...field}
-															autoFocus
-															className="mt-3"
-															placeholder={t(
-																"vendors.form.vendor_name_placeholder",
-															)}
-															autoCorrect="off"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="website"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("vendors.form.vendor_website")}
-													</FormLabel>
-													<FormControl>
-														<Input
-															{...field}
-															className="mt-3"
-															placeholder={t(
-																"vendors.form.vendor_website_placeholder",
-															)}
-															type="url"
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="description"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("vendors.form.vendor_description")}
-													</FormLabel>
-													<FormControl>
-														<Textarea
-															{...field}
-															className="mt-3 min-h-[80px]"
-															placeholder={t(
-																"vendors.form.vendor_description_placeholder",
-															)}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="category"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("vendors.form.vendor_category")}
-													</FormLabel>
-													<FormControl>
-														<Select
-															{...field}
-															value={field.value}
-															onValueChange={field.onChange}
-														>
-															<SelectTrigger>
-																<SelectValue
-																	placeholder={t(
-																		"vendors.form.vendor_category_placeholder",
-																	)}
-																/>
-															</SelectTrigger>
-															<SelectContent>
-																{Object.values(VendorCategory).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="status"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>
-														{t("vendors.form.vendor_status")}
-													</FormLabel>
-													<FormControl>
-														<Select
-															{...field}
-															value={field.value}
-															onValueChange={field.onChange}
-														>
-															<SelectTrigger>
-																<SelectValue
-																	placeholder={t(
-																		"vendors.form.vendor_status_placeholder",
-																	)}
-																/>
-															</SelectTrigger>
-															<SelectContent>
-																{Object.values(VendorStatus).map((status) => {
-																	const formattedStatus = status
-																		.toLowerCase()
-																		.split("_")
-																		.map(
-																			(word) =>
-																				word.charAt(0).toUpperCase() +
-																				word.slice(1),
-																		)
-																		.join(" ");
-																	return (
-																		<SelectItem key={status} value={status}>
-																			{formattedStatus}
-																		</SelectItem>
-																	);
-																})}
-															</SelectContent>
-														</Select>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-										<FormField
-											control={form.control}
-											name="assigneeId"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>{t("common.assignee.label")}</FormLabel>
-													<FormControl>
-														<SelectAssignee
-															assignees={assignees}
-															assigneeId={field.value ?? null}
-															withTitle={false}
-															onAssigneeChange={field.onChange}
-														/>
-													</FormControl>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</div>
-								</AccordionContent>
-							</AccordionItem>
-						</Accordion>
-					</div>
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="h-[calc(100vh-250px)] scrollbar-hide overflow-auto">
+          <div>
+            <Accordion type="multiple" defaultValue={["vendor"]}>
+              <AccordionItem value="vendor">
+                <AccordionTrigger>
+                  {t("vendors.form.vendor_details")}
+                </AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <FormField
+                      control={form.control}
+                      name="name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("vendors.form.vendor_name")}</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              autoFocus
+                              className="mt-3"
+                              placeholder={t(
+                                "vendors.form.vendor_name_placeholder",
+                              )}
+                              autoCorrect="off"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="website"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("vendors.form.vendor_website")}
+                          </FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              className="mt-3"
+                              placeholder={t(
+                                "vendors.form.vendor_website_placeholder",
+                              )}
+                              type="url"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("vendors.form.vendor_description")}
+                          </FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              className="mt-3 min-h-[80px]"
+                              placeholder={t(
+                                "vendors.form.vendor_description_placeholder",
+                              )}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="category"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("vendors.form.vendor_category")}
+                          </FormLabel>
+                          <FormControl>
+                            <Select
+                              {...field}
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={t(
+                                    "vendors.form.vendor_category_placeholder",
+                                  )}
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {Object.values(VendorCategory).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="status"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>
+                            {t("vendors.form.vendor_status")}
+                          </FormLabel>
+                          <FormControl>
+                            <Select
+                              {...field}
+                              value={field.value}
+                              onValueChange={field.onChange}
+                            >
+                              <SelectTrigger>
+                                <SelectValue
+                                  placeholder={t(
+                                    "vendors.form.vendor_status_placeholder",
+                                  )}
+                                />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {Object.values(VendorStatus).map((status) => {
+                                  const formattedStatus = status
+                                    .toLowerCase()
+                                    .split("_")
+                                    .map(
+                                      (word) =>
+                                        word.charAt(0).toUpperCase() +
+                                        word.slice(1),
+                                    )
+                                    .join(" ");
+                                  return (
+                                    <SelectItem key={status} value={status}>
+                                      {formattedStatus}
+                                    </SelectItem>
+                                  );
+                                })}
+                              </SelectContent>
+                            </Select>
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="assigneeId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("common.assignee.label")}</FormLabel>
+                          <FormControl>
+                            <SelectAssignee
+                              assignees={assignees}
+                              assigneeId={field.value ?? null}
+                              withTitle={false}
+                              onAssigneeChange={field.onChange}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
 
-					<div className="flex justify-end mt-4">
-						<Button
-							type="submit"
-							variant="action"
-							disabled={createVendor.status === "executing"}
-						>
-							<div className="flex items-center justify-center">
-								{t("vendors.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={createVendor.status === "executing"}
+            >
+              <div className="flex items-center justify-center">
+                {t("vendors.actions.create")}
+                <ArrowRightIcon className="ml-2 h-4 w-4" />
+              </div>
+            </Button>
+          </div>
+        </div>
+      </form>
+    </Form>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee.tsx b/apps/app/src/components/SelectAssignee.tsx
similarity index 100%
rename from apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee.tsx
rename to apps/app/src/components/SelectAssignee.tsx
diff --git a/apps/app/src/components/forms/organization/delete-organization.tsx b/apps/app/src/components/forms/organization/delete-organization.tsx
index a2e67e2fa8..33bcd0eee0 100644
--- a/apps/app/src/components/forms/organization/delete-organization.tsx
+++ b/apps/app/src/components/forms/organization/delete-organization.tsx
@@ -62,7 +62,7 @@ export function DeleteOrganization({
         </CardDescription>
       </CardHeader>
       <CardContent />
-      <CardFooter className="flex justify-between bg-accent/30">
+      <CardFooter className="flex justify-between">
         <div />
 
         <AlertDialog>
diff --git a/apps/app/src/components/forms/organization/update-organization-name.tsx b/apps/app/src/components/forms/organization/update-organization-name.tsx
index 1fa0d7eefd..d1e577d3c1 100644
--- a/apps/app/src/components/forms/organization/update-organization-name.tsx
+++ b/apps/app/src/components/forms/organization/update-organization-name.tsx
@@ -90,7 +90,7 @@ export function UpdateOrganizationName({
               )}
             />
           </CardContent>
-          <CardFooter className="flex justify-between bg-accent/30">
+          <CardFooter className="flex justify-between">
             <div className="text-xs text-muted-foreground">
               {t("settings.general.org_name_tip")}
             </div>
diff --git a/apps/app/src/components/forms/policies/UpdatePolicyOverview.tsx b/apps/app/src/components/forms/policies/UpdatePolicyOverview.tsx
index 8d0e782086..f3e834af91 100644
--- a/apps/app/src/components/forms/policies/UpdatePolicyOverview.tsx
+++ b/apps/app/src/components/forms/policies/UpdatePolicyOverview.tsx
@@ -2,35 +2,35 @@
 
 import { updatePolicyFormAction } from "@/actions/policies/update-policy-form-action";
 import { updatePolicyFormSchema } from "@/actions/schema";
-import { SelectAssignee } from "@/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { StatusPolicies, type StatusType } from "@/components/status-policies";
 import { useI18n } from "@/locales/client";
 import {
-	Departments,
-	Frequency,
-	Member,
-	User,
-	type Policy,
-	type PolicyStatus,
+  Departments,
+  Frequency,
+  Member,
+  User,
+  type Policy,
+  type PolicyStatus,
 } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import { Calendar } from "@comp/ui/calendar";
 import { cn } from "@comp/ui/cn";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Popover, PopoverContent, PopoverTrigger } from "@comp/ui/popover";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { Switch } from "@comp/ui/switch";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -42,270 +42,270 @@ import { toast } from "sonner";
 import type { z } from "zod";
 
 const policyStatuses: PolicyStatus[] = [
-	"draft",
-	"published",
-	"needs_review",
+  "draft",
+  "published",
+  "needs_review",
 ] as const;
 
 export function UpdatePolicyOverview({
-	policy,
-	assignees,
+  policy,
+  assignees,
 }: {
-	policy: Policy;
-	assignees: (Member & { user: User })[];
+  policy: Policy;
+  assignees: (Member & { user: User })[];
 }) {
-	const t = useI18n();
+  const t = useI18n();
 
-	const updatePolicyForm = useAction(updatePolicyFormAction, {
-		onSuccess: () => {
-			toast.success(t("policies.overview.form.update_policy_success"));
-		},
-		onError: () => {
-			toast.error(t("policies.overview.form.update_policy_error"));
-		},
-	});
+  const updatePolicyForm = useAction(updatePolicyFormAction, {
+    onSuccess: () => {
+      toast.success(t("policies.overview.form.update_policy_success"));
+    },
+    onError: () => {
+      toast.error(t("policies.overview.form.update_policy_error"));
+    },
+  });
 
-	const calculateReviewDate = (): Date => {
-		if (!policy.reviewDate) {
-			return new Date();
-		}
-		return new Date(policy.reviewDate);
-	};
+  const calculateReviewDate = (): Date => {
+    if (!policy.reviewDate) {
+      return new Date();
+    }
+    return new Date(policy.reviewDate);
+  };
 
-	const reviewDate = calculateReviewDate();
+  const reviewDate = calculateReviewDate();
 
-	const form = useForm<z.infer<typeof updatePolicyFormSchema>>({
-		resolver: zodResolver(updatePolicyFormSchema),
-		defaultValues: {
-			id: policy.id,
-			status: policy.status,
-			assigneeId: policy.assigneeId ?? "",
-			department: policy.department ?? Departments.admin,
-			review_frequency: policy.frequency ?? Frequency.monthly,
-			review_date: reviewDate,
-			isRequiredToSign: policy.isRequiredToSign ? "required" : "not_required",
-		},
-	});
+  const form = useForm<z.infer<typeof updatePolicyFormSchema>>({
+    resolver: zodResolver(updatePolicyFormSchema),
+    defaultValues: {
+      id: policy.id,
+      status: policy.status,
+      assigneeId: policy.assigneeId ?? "",
+      department: policy.department ?? Departments.admin,
+      review_frequency: policy.frequency ?? Frequency.monthly,
+      review_date: reviewDate,
+      isRequiredToSign: policy.isRequiredToSign ? "required" : "not_required",
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof updatePolicyFormSchema>) => {
-		updatePolicyForm.execute({
-			id: data.id,
-			status: data.status as PolicyStatus,
-			assigneeId: data.assigneeId,
-			department: data.department,
-			review_frequency: data.review_frequency,
-			review_date: data.review_date,
-			isRequiredToSign: data.isRequiredToSign,
-		});
-	};
+  const onSubmit = (data: z.infer<typeof updatePolicyFormSchema>) => {
+    updatePolicyForm.execute({
+      id: data.id,
+      status: data.status as PolicyStatus,
+      assigneeId: data.assigneeId,
+      department: data.department,
+      review_frequency: data.review_frequency,
+      review_date: data.review_date,
+      isRequiredToSign: data.isRequiredToSign,
+    });
+  };
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)}>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<FormField
-						control={form.control}
-						name="status"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("policies.overview.form.status")}</FormLabel>
-								<FormControl>
-									<Select value={field.value} onValueChange={field.onChange}>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t(
-													"policies.overview.form.status_placeholder",
-												)}
-											>
-												{field.value && (
-													<StatusPolicies status={field.value as StatusType} />
-												)}
-											</SelectValue>
-										</SelectTrigger>
-										<SelectContent>
-											{policyStatuses.map((status) => (
-												<SelectItem key={status} value={status}>
-													<StatusPolicies status={status} />
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="review_frequency"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>
-									{t("policies.overview.form.review_frequency")}
-								</FormLabel>
-								<FormControl>
-									<Select value={field.value} onValueChange={field.onChange}>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t(
-													"policies.overview.form.review_frequency_placeholder",
-												)}
-											/>
-										</SelectTrigger>
-										<SelectContent>
-											{Object.values(Frequency).map((frequency) => (
-												<SelectItem key={frequency} value={frequency}>
-													{t(`common.frequency.${frequency}`)}
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="department"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>
-									{t("policies.overview.form.policy_department")}
-								</FormLabel>
-								<FormControl>
-									<Select
-										{...field}
-										value={field.value}
-										onValueChange={field.onChange}
-									>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t(
-													"policies.overview.form.policy_department_placeholder",
-												)}
-											/>
-										</SelectTrigger>
-										<SelectContent>
-											{Object.values(Departments).map((department) => {
-												const formattedDepartment = department.toUpperCase();
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("policies.overview.form.status")}</FormLabel>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t(
+                          "policies.overview.form.status_placeholder",
+                        )}
+                      >
+                        {field.value && (
+                          <StatusPolicies status={field.value as StatusType} />
+                        )}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {policyStatuses.map((status) => (
+                        <SelectItem key={status} value={status}>
+                          <StatusPolicies status={status} />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="review_frequency"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("policies.overview.form.review_frequency")}
+                </FormLabel>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t(
+                          "policies.overview.form.review_frequency_placeholder",
+                        )}
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {Object.values(Frequency).map((frequency) => (
+                        <SelectItem key={frequency} value={frequency}>
+                          {t(`common.frequency.${frequency}`)}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="department"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("policies.overview.form.policy_department")}
+                </FormLabel>
+                <FormControl>
+                  <Select
+                    {...field}
+                    value={field.value}
+                    onValueChange={field.onChange}
+                  >
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t(
+                          "policies.overview.form.policy_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="assigneeId"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>
-									{t("policies.overview.form.policy_assignee")}
-								</FormLabel>
-								<FormControl>
-									<SelectAssignee
-										assignees={assignees}
-										onAssigneeChange={field.onChange}
-										assigneeId={field.value ?? null}
-										disabled={updatePolicyForm.status === "executing"}
-										withTitle={false}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-				</div>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
-					<FormField
-						control={form.control}
-						name="review_date"
-						render={({ field }) => (
-							<FormItem className="flex flex-col">
-								<FormLabel>{t("policies.overview.form.review_date")}</FormLabel>
-								<Popover>
-									<PopoverTrigger asChild>
-										<FormControl>
-											<div className="pt-1.5">
-												<Button
-													variant={"outline"}
-													className={cn(
-														"pl-3 text-left font-normal w-full",
-														!field.value && "text-muted-foreground",
-													)}
-												>
-													{field.value ? (
-														format(field.value, "PPP")
-													) : (
-														<span>
-															{t(
-																"policies.overview.form.review_date_placeholder",
-															)}
-														</span>
-													)}
-													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-												</Button>
-											</div>
-										</FormControl>
-									</PopoverTrigger>
-									<PopoverContent className="w-auto" align="start">
-										<Calendar
-											mode="single"
-											selected={field.value}
-											onSelect={field.onChange}
-											disabled={(date) => date <= new Date()}
-											initialFocus
-										/>
-									</PopoverContent>
-								</Popover>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="isRequiredToSign"
-						render={({ field }) => (
-							<FormItem className="flex flex-col gap-3">
-								<FormLabel>
-									{t("policies.overview.form.signature_requirement")}
-								</FormLabel>
-								<FormControl>
-									<Switch
-										checked={field.value === "required"}
-										onCheckedChange={(checked) => {
-											field.onChange(checked ? "required" : "not_required");
-										}}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-				</div>
-				<div className="flex justify-end mt-4">
-					<Button
-						type="submit"
-						variant="action"
-						disabled={updatePolicyForm.status === "executing"}
-					>
-						{updatePolicyForm.status === "executing" ? (
-							<Loader2 className="h-4 w-4 animate-spin" />
-						) : (
-							t("common.actions.save")
-						)}
-					</Button>
-				</div>
-			</form>
-		</Form>
-	);
+                        return (
+                          <SelectItem key={department} value={department}>
+                            {formattedDepartment}
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="assigneeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("policies.overview.form.policy_assignee")}
+                </FormLabel>
+                <FormControl>
+                  <SelectAssignee
+                    assignees={assignees}
+                    onAssigneeChange={field.onChange}
+                    assigneeId={field.value ?? null}
+                    disabled={updatePolicyForm.status === "executing"}
+                    withTitle={false}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
+          <FormField
+            control={form.control}
+            name="review_date"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>{t("policies.overview.form.review_date")}</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <div className="pt-1.5">
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "pl-3 text-left font-normal w-full",
+                            !field.value && "text-muted-foreground",
+                          )}
+                        >
+                          {field.value ? (
+                            format(field.value, "PPP")
+                          ) : (
+                            <span>
+                              {t(
+                                "policies.overview.form.review_date_placeholder",
+                              )}
+                            </span>
+                          )}
+                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        </Button>
+                      </div>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      disabled={(date) => date <= new Date()}
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="isRequiredToSign"
+            render={({ field }) => (
+              <FormItem className="flex flex-col gap-3">
+                <FormLabel>
+                  {t("policies.overview.form.signature_requirement")}
+                </FormLabel>
+                <FormControl>
+                  <Switch
+                    checked={field.value === "required"}
+                    onCheckedChange={(checked) => {
+                      field.onChange(checked ? "required" : "not_required");
+                    }}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex justify-end mt-4">
+          <Button
+            type="submit"
+            variant="action"
+            disabled={updatePolicyForm.status === "executing"}
+          >
+            {updatePolicyForm.status === "executing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              t("common.actions.save")
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
 }
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 a4161c59d4..0fd02322ee 100644
--- a/apps/app/src/components/forms/risks/create-risk-form.tsx
+++ b/apps/app/src/components/forms/risks/create-risk-form.tsx
@@ -2,32 +2,32 @@
 
 import { createRiskAction } from "@/actions/risk/create-risk-action";
 import { createRiskSchema } from "@/actions/schema";
-import { SelectAssignee } from "@/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { useI18n } from "@/locales/client";
 import type { Member, RiskStatus, User } from "@comp/db/types";
 import { Departments, RiskCategory } from "@comp/db/types";
 import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
 } from "@comp/ui/accordion";
 import { Button } from "@comp/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import { Input } from "@comp/ui/input";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { Textarea } from "@comp/ui/textarea";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -39,240 +39,240 @@ import { toast } from "sonner";
 import type { z } from "zod";
 
 export function CreateRisk({
-	assignees,
+  assignees,
 }: { assignees: (Member & { user: User })[] }) {
-	const t = useI18n();
+  const t = useI18n();
 
-	// 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,
-	});
+  // 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,
+  });
 
-	const [_, setCreateRiskSheet] = useQueryState("create-risk-sheet");
+  const [_, setCreateRiskSheet] = useQueryState("create-risk-sheet");
 
-	const createRisk = useAction(createRiskAction, {
-		onSuccess: async () => {
-			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);
+    },
+    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,
-			assigneeId: null,
-		},
-	});
+  const form = useForm<z.infer<typeof createRiskSchema>>({
+    resolver: zodResolver(createRiskSchema),
+    defaultValues: {
+      title: "",
+      description: "",
+      category: RiskCategory.operations,
+      department: Departments.admin,
+      assigneeId: null,
+    },
+  });
 
-	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="assigneeId"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>{t("common.assignee.label")}</FormLabel>
-													<FormControl>
-														<SelectAssignee
-															assigneeId={field.value ?? null}
-															assignees={assignees}
-															onAssigneeChange={field.onChange}
-															disabled={createRisk.status === "executing"}
-															withTitle={false}
-														/>
-													</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="assigneeId"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("common.assignee.label")}</FormLabel>
+                          <FormControl>
+                            <SelectAssignee
+                              assigneeId={field.value ?? null}
+                              assignees={assignees}
+                              onAssigneeChange={field.onChange}
+                              disabled={createRisk.status === "executing"}
+                              withTitle={false}
+                            />
+                          </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/forms/risks/risk-overview.tsx b/apps/app/src/components/forms/risks/risk-overview.tsx
index 22df4d0d7f..d0f2bc3302 100644
--- a/apps/app/src/components/forms/risks/risk-overview.tsx
+++ b/apps/app/src/components/forms/risks/risk-overview.tsx
@@ -2,33 +2,32 @@
 
 import { updateRiskAction } from "@/actions/risk/update-risk-action";
 import { updateRiskSchema } from "@/actions/schema";
-import { SelectAssignee } from "@/app/[locale]/(app)/(dashboard)/[orgId]/components/SelectAssignee";
-import { SelectUser } from "@/components/select-user";
+import { SelectAssignee } from "@/components/SelectAssignee";
 import { STATUS_TYPES, Status, type StatusType } from "@/components/status";
 import { useI18n } from "@/locales/client";
 import {
-	Departments,
-	Member,
-	type Risk,
-	RiskCategory,
-	RiskStatus,
-	type User,
+  Departments,
+  Member,
+  type Risk,
+  RiskCategory,
+  RiskStatus,
+  type User,
 } from "@comp/db/types";
 import { Button } from "@comp/ui/button";
 import {
-	Form,
-	FormControl,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
 } from "@comp/ui/form";
 import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@comp/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Loader2 } from "lucide-react";
@@ -39,192 +38,192 @@ import { toast } from "sonner";
 import type { z } from "zod";
 
 export function UpdateRiskOverview({
-	risk,
-	assignees,
+  risk,
+  assignees,
 }: {
-	risk: Risk;
-	assignees: (Member & { user: User })[];
+  risk: Risk;
+  assignees: (Member & { user: User })[];
 }) {
-	const t = useI18n();
+  const t = useI18n();
 
-	const updateRisk = useAction(updateRiskAction, {
-		onSuccess: () => {
-			toast.success(t("risk.form.update_risk_success"));
-		},
-		onError: () => {
-			toast.error(t("risk.form.update_risk_error"));
-		},
-	});
+  const updateRisk = useAction(updateRiskAction, {
+    onSuccess: () => {
+      toast.success(t("risk.form.update_risk_success"));
+    },
+    onError: () => {
+      toast.error(t("risk.form.update_risk_error"));
+    },
+  });
 
-	const form = useForm<z.infer<typeof updateRiskSchema>>({
-		resolver: zodResolver(updateRiskSchema),
-		defaultValues: {
-			id: risk.id,
-			title: risk.title ?? "",
-			description: risk.description ?? "",
-			assigneeId: risk.assigneeId ?? null,
-			category: risk.category ?? RiskCategory.operations,
-			department: risk.department ?? Departments.admin,
-			status: risk.status ?? RiskStatus.open,
-		},
-	});
+  const form = useForm<z.infer<typeof updateRiskSchema>>({
+    resolver: zodResolver(updateRiskSchema),
+    defaultValues: {
+      id: risk.id,
+      title: risk.title ?? "",
+      description: risk.description ?? "",
+      assigneeId: risk.assigneeId ?? null,
+      category: risk.category ?? RiskCategory.operations,
+      department: risk.department ?? Departments.admin,
+      status: risk.status ?? RiskStatus.open,
+    },
+  });
 
-	const onSubmit = (data: z.infer<typeof updateRiskSchema>) => {
-		updateRisk.execute({
-			id: data.id,
-			title: data.title,
-			description: data.description,
-			assigneeId: data.assigneeId,
-			category: data.category,
-			department: data.department,
-			status: data.status,
-		});
-	};
+  const onSubmit = (data: z.infer<typeof updateRiskSchema>) => {
+    updateRisk.execute({
+      id: data.id,
+      title: data.title,
+      description: data.description,
+      assigneeId: data.assigneeId,
+      category: data.category,
+      department: data.department,
+      status: data.status,
+    });
+  };
 
-	console.log(form.formState.defaultValues);
+  console.log(form.formState.defaultValues);
 
-	return (
-		<Form {...form}>
-			<form onSubmit={form.handleSubmit(onSubmit)}>
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<FormField
-						control={form.control}
-						name="assigneeId"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("common.assignee.label")}</FormLabel>
-								<FormControl>
-									<SelectAssignee
-										assigneeId={field.value ?? null}
-										assignees={assignees}
-										onAssigneeChange={field.onChange}
-										disabled={updateRisk.status === "executing"}
-										withTitle={false}
-									/>
-								</FormControl>
-								<FormMessage />
-							</FormItem>
-						)}
-					/>
-					<FormField
-						control={form.control}
-						name="status"
-						render={({ field }) => (
-							<FormItem>
-								<FormLabel>{t("risk.form.risk_status")}</FormLabel>
-								<FormControl>
-									<Select value={field.value} onValueChange={field.onChange}>
-										<SelectTrigger>
-											<SelectValue
-												placeholder={t("risk.form.risk_status_placeholder")}
-											>
-												{field.value && (
-													<Status status={field.value as StatusType} />
-												)}
-											</SelectValue>
-										</SelectTrigger>
-										<SelectContent>
-											{STATUS_TYPES.map((status) => (
-												<SelectItem key={status} value={status}>
-													<Status status={status} />
-												</SelectItem>
-											))}
-										</SelectContent>
-									</Select>
-								</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="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="assigneeId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("common.assignee.label")}</FormLabel>
+                <FormControl>
+                  <SelectAssignee
+                    assigneeId={field.value ?? null}
+                    assignees={assignees}
+                    onAssigneeChange={field.onChange}
+                    disabled={updateRisk.status === "executing"}
+                    withTitle={false}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("risk.form.risk_status")}</FormLabel>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={t("risk.form.risk_status_placeholder")}
+                      >
+                        {field.value && (
+                          <Status status={field.value as StatusType} />
+                        )}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      {STATUS_TYPES.map((status) => (
+                        <SelectItem key={status} value={status}>
+                          <Status status={status} />
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </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>
-						)}
-					/>
-				</div>
-				<div className="flex justify-end mt-4">
-					<Button
-						type="submit"
-						variant="action"
-						disabled={updateRisk.status === "executing"}
-					>
-						{updateRisk.status === "executing" ? (
-							<Loader2 className="h-4 w-4 animate-spin" />
-						) : (
-							t("common.actions.save")
-						)}
-					</Button>
-				</div>
-			</form>
-		</Form>
-	);
+                        return (
+                          <SelectItem key={department} value={department}>
+                            {formattedDepartment}
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <div className="flex justify-end mt-4">
+          <Button
+            type="submit"
+            variant="action"
+            disabled={updateRisk.status === "executing"}
+          >
+            {updateRisk.status === "executing" ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              t("common.actions.save")
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
 }
diff --git a/packages/ui/src/components/card.tsx b/packages/ui/src/components/card.tsx
index f16f6d2e24..c9c755d9db 100644
--- a/packages/ui/src/components/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -66,7 +66,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 border-t text-xs", className)}
+    className={cn("flex items-center p-6 border-t text-xs bg-accent/20 text-muted-foreground", className)}
     {...props}
   />
 ));

From c2d097b998bc80db626db76a5a936458131d8ac4 Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Sat, 5 Apr 2025 16:17:44 -0400
Subject: [PATCH 2/2] refactor: enhance evidence and policy chart components

- Standardized formatting and structure in EvidenceAssigneeChart, EvidenceStatusChart, PolicyAssigneeChart, and PolicyStatusChart components for improved readability and maintainability.
- Updated chart data handling and tooltip components for better user experience.
- Improved loading state in the loading component for the evidence overview page.
- Ensured consistent use of Tailwind CSS classes across all chart components.
---
 .../components/evidence-assignee-chart.tsx    | 370 +++++++--------
 .../components/evidence-status-chart.tsx      | 408 ++++++++--------
 .../[orgId]/evidence/all/loading.tsx          |   6 +-
 .../components/policy-assignee-chart.tsx      | 430 +++++++++--------
 .../components/policy-status-chart.tsx        | 448 +++++++++---------
 .../[orgId]/policies/(overview)/page.tsx      | 310 ++++++------
 6 files changed, 981 insertions(+), 991 deletions(-)

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-assignee-chart.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-assignee-chart.tsx
index 9d046865d0..d1dece5e10 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-assignee-chart.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-assignee-chart.tsx
@@ -3,217 +3,215 @@
 import * as React from "react";
 
 import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardFooter,
-	CardTitle,
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-	type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
 } from "@comp/ui/chart";
 import { useI18n } from "@/locales/client";
 import { Badge } from "@comp/ui/badge";
 import { BarChart as BarChartIcon, Users, Info } from "lucide-react";
 import {
-	Bar,
-	BarChart,
-	XAxis,
-	YAxis,
-	Legend,
-	ResponsiveContainer,
+  Bar,
+  BarChart,
+  XAxis,
+  YAxis,
+  Legend,
+  ResponsiveContainer,
 } from "recharts";
 
 interface AssigneeData {
-	id: string;
-	name: string;
-	total: number;
-	published: number;
-	draft: number;
-	archived: number;
-	needsReview: number;
+  id: string;
+  name: string;
+  total: number;
+  published: number;
+  draft: number;
+  archived: number;
+  needsReview: number;
 }
 
 interface EvidenceAssigneeChartProps {
-	data?: AssigneeData[] | null;
+  data?: AssigneeData[] | null;
 }
 
 const CHART_COLORS = {
-	published: "hsl(var(--chart-positive))", // green
-	draft: "hsl(var(--chart-neutral))", // yellow
-	not_relevant: "hsl(var(--chart-destructive))", // red
+  published: "hsl(var(--chart-positive))", // green
+  draft: "hsl(var(--chart-neutral))", // yellow
+  not_relevant: "hsl(var(--chart-destructive))", // red
 };
 
 export function EvidenceAssigneeChart({ data }: EvidenceAssigneeChartProps) {
-	const t = useI18n();
+  const t = useI18n();
 
-	if (!data || data.length === 0) {
-		return (
-			<Card className="flex flex-col border overflow-hidden">
-				<CardHeader className="pb-2">
-					<div className="flex items-center justify-between">
-						<CardTitle className="flex items-center gap-2">
-							<BarChartIcon className="h-4 w-4 text-primary" />
-							{t("evidence.dashboard.by_assignee") || "Evidence by Assignee"}
-						</CardTitle>
-						<Badge variant="outline" className="text-xs">
-							Distribution
-						</Badge>
-					</div>
-				</CardHeader>
-				<CardContent className="flex-1 flex items-center justify-center py-10">
-					<div className="text-center space-y-2">
-						<div className="flex justify-center text-muted-foreground">
-							<Users className="h-10 w-10 opacity-30" />
-						</div>
-						<p className="text-center text-sm text-muted-foreground">
-							No evidence assigned to users
-						</p>
-					</div>
-				</CardContent>
-				<CardFooter className="bg-muted/30 border-t py-3">
-					<div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
-				</CardFooter>
-			</Card>
-		);
-	}
+  if (!data || data.length === 0) {
+    return (
+      <Card className="flex flex-col border overflow-hidden">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              {t("evidence.dashboard.by_assignee") || "Evidence by Assignee"}
+            </CardTitle>
+            <Badge variant="outline" className="text-xs">
+              Distribution
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex items-center justify-center py-10">
+          <div className="text-center space-y-2">
+            <div className="flex justify-center text-muted-foreground">
+              <Users className="h-10 w-10 opacity-30" />
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              No evidence assigned to users
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="bg-muted/30 border-t py-3">
+          <div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
+        </CardFooter>
+      </Card>
+    );
+  }
 
-	// Sort assignees by total policies (descending)
-	const sortedData = React.useMemo(() => {
-		return [...data]
-			.sort((a, b) => b.total - a.total)
-			.slice(0, 4)
-			.reverse();
-	}, [data]);
+  // Sort assignees by total policies (descending)
+  const sortedData = React.useMemo(() => {
+    return [...data]
+      .sort((a, b) => b.total - a.total)
+      .slice(0, 4)
+      .reverse();
+  }, [data]);
 
-	const chartData = sortedData.map((item) => ({
-		name: item.name,
-		published: item.published,
-		draft: item.draft,
-	}));
+  const chartData = sortedData.map((item) => ({
+    name: item.name,
+    published: item.published,
+    draft: item.draft,
+  }));
 
-	const chartConfig = {
-		published: {
-			label: t("evidence.status.published"),
-			color: CHART_COLORS.published,
-		},
-		draft: {
-			label: t("evidence.status.draft"),
-			color: CHART_COLORS.draft,
-		},
-	} satisfies ChartConfig;
+  const chartConfig = {
+    published: {
+      label: t("evidence.status.published"),
+      color: CHART_COLORS.published,
+    },
+    draft: {
+      label: t("evidence.status.draft"),
+      color: CHART_COLORS.draft,
+    },
+  } satisfies ChartConfig;
 
-	// Calculate total evidence and top assignee
-	const totalEvidence = React.useMemo(() => {
-		if (!data.length) return 0;
-		return data.reduce((sum, item) => sum + item.total, 0);
-	}, [data]);
+  // Calculate total evidence and top assignee
+  const totalEvidence = React.useMemo(() => {
+    if (!data.length) return 0;
+    return data.reduce((sum, item) => sum + item.total, 0);
+  }, [data]);
 
-	const topAssignee = React.useMemo(() => {
-		if (!data.length) return null;
-		return data.reduce((prev, current) =>
-			prev.total > current.total ? prev : current,
-		);
-	}, [data]);
+  const topAssignee = React.useMemo(() => {
+    if (!data.length) return null;
+    return data.reduce((prev, current) =>
+      prev.total > current.total ? prev : current,
+    );
+  }, [data]);
 
-	return (
-		<Card className="flex flex-col border overflow-hidden">
-			<CardHeader className="pb-2">
-				<div className="flex items-center justify-between">
-					<CardTitle className="flex items-center gap-2">
-						<BarChartIcon className="h-4 w-4 text-primary" />
-						{t("evidence.dashboard.by_assignee") || "Evidence by Assignee"}
-					</CardTitle>
-					{topAssignee && (
-						<Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 text-xs">
-							Top: {topAssignee.name}
-						</Badge>
-					)}
-				</div>
+  return (
+    <Card className="flex flex-col border overflow-hidden">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            {t("evidence.dashboard.by_assignee") || "Evidence by Assignee"}
+          </CardTitle>
+          {topAssignee && (
+            <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 text-xs">
+              Top: {topAssignee.name}
+            </Badge>
+          )}
+        </div>
 
-				<div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
-					<div
-						className="h-full bg-primary/80 transition-all"
-						style={{
-							width: `${totalEvidence > 0 ? 100 : 0}%`,
-							opacity: 0.7,
-						}}
-					/>
-				</div>
-			</CardHeader>
-			<CardContent className="flex-1">
-				<div className="flex flex-col h-full">
-					<div className="flex justify-between items-center mb-1 text-xs text-muted-foreground px-1">
-						<span>Assignee</span>
-						<span>Evidence Count</span>
-					</div>
-					<ChartContainer config={chartConfig}>
-						<ResponsiveContainer width="100%" height={250}>
-							<BarChart
-								accessibilityLayer
-								data={chartData}
-								layout="vertical"
-								barSize={24}
-								barGap={4}
-								margin={{
-									top: 0,
-									right: 0,
-									bottom: 0,
-									left: 0,
-								}}
-							>
-								<XAxis type="number" hide />
-								<YAxis
-									dataKey="name"
-									type="category"
-									tickLine={false}
-									tickMargin={10}
-									axisLine={false}
-									tickFormatter={(value) => value.split(" ")[0]}
-									fontSize={12}
-									stroke="hsl(var(--muted-foreground))"
-								/>
-								<ChartTooltip
-									cursor={false}
-									content={<ChartTooltipContent />}
-								/>
-								<Bar
-									dataKey="published"
-									stackId="a"
-									fill={CHART_COLORS.published}
-									radius={[0, 2, 2, 0]}
-									animationDuration={800}
-									animationBegin={100}
-								/>
-								<Bar
-									dataKey="draft"
-									stackId="a"
-									fill={CHART_COLORS.draft}
-									radius={[0, 0, 0, 0]}
-									animationDuration={800}
-									animationBegin={200}
-								/>
-							</BarChart>
-						</ResponsiveContainer>
-					</ChartContainer>
-				</div>
-			</CardContent>
-			<CardFooter className="bg-muted/30 border-t py-3">
-				<div className="flex flex-wrap gap-4 justify-center w-full py-1">
-					{Object.entries(chartConfig).map(([key, config]) => (
-						<div key={key} className="flex items-center gap-2">
-							<div
-								className="h-3 w-3 rounded-sm"
-								style={{ backgroundColor: config.color }}
-							/>
-							<span className="text-xs font-medium">{config.label}</span>
-						</div>
-					))}
-				</div>
-			</CardFooter>
-		</Card>
-	);
+        <div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
+          <div
+            className="h-full bg-primary/80 transition-all"
+            style={{
+              width: `${totalEvidence > 0 ? 100 : 0}%`,
+              opacity: 0.7,
+            }}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="flex flex-col h-full">
+          <div className="flex justify-between items-center mb-1 text-xs text-muted-foreground px-1">
+            <span>Assignee</span>
+            <span>Evidence Count</span>
+          </div>
+          <ChartContainer config={chartConfig}>
+            <ResponsiveContainer width="100%" height={250}>
+              <BarChart
+                accessibilityLayer
+                data={chartData}
+                layout="vertical"
+                barSize={24}
+                barGap={4}
+                margin={{
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                }}
+              >
+                <XAxis type="number" hide />
+                <YAxis
+                  dataKey="name"
+                  type="category"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => value.split(" ")[0]}
+                  fontSize={12}
+                  stroke="hsl(var(--muted-foreground))"
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent />}
+                />
+                <Bar
+                  dataKey="published"
+                  stackId="a"
+                  fill={CHART_COLORS.published}
+                  radius={[0, 2, 2, 0]}
+                  animationDuration={800}
+                  animationBegin={100}
+                />
+                <Bar
+                  dataKey="draft"
+                  stackId="a"
+                  fill={CHART_COLORS.draft}
+                  radius={[0, 0, 0, 0]}
+                  animationDuration={800}
+                  animationBegin={200}
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </ChartContainer>
+        </div>
+      </CardContent>
+      <CardFooter className="bg-muted/30 border-t py-3">
+        <div className="flex flex-wrap gap-4 justify-center w-full py-1">
+          {Object.entries(chartConfig).map(([key, config]) => (
+            <div key={key} className="flex items-center gap-2">
+              <div
+                className="h-3 w-3"
+                style={{ backgroundColor: config.color }}
+              />
+              <span className="text-xs font-medium">{config.label}</span>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-status-chart.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-status-chart.tsx
index 9e027073ce..6b1ded8e21 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-status-chart.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/(overview)/components/evidence-status-chart.tsx
@@ -4,233 +4,231 @@ import * as React from "react";
 import { Pie, PieChart, Label } from "recharts";
 
 import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardFooter,
-	CardTitle,
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
 } from "@comp/ui/chart";
 import { useI18n } from "@/locales/client";
 import { Badge } from "@comp/ui/badge";
 import { PieChart as PieChartIcon, FileCheck, Info } from "lucide-react";
 
 interface EvidenceOverviewData {
-	totalEvidence: number;
-	publishedEvidence: number;
-	draftEvidence: number;
-	isNotRelevant: number;
+  totalEvidence: number;
+  publishedEvidence: number;
+  draftEvidence: number;
+  isNotRelevant: number;
 }
 
 interface EvidenceStatusChartProps {
-	data?: EvidenceOverviewData | null;
+  data?: EvidenceOverviewData | null;
 }
 
 const CHART_COLORS = {
-	published: "hsl(var(--chart-positive))", // green
-	draft: "hsl(var(--chart-neutral))", // yellow
-	not_relevant: "hsl(var(--chart-destructive))", // red
+  published: "hsl(var(--chart-positive))", // green
+  draft: "hsl(var(--chart-neutral))", // yellow
+  not_relevant: "hsl(var(--chart-destructive))", // red
 };
 
 export function EvidenceStatusChart({ data }: EvidenceStatusChartProps) {
-	const t = useI18n();
+  const t = useI18n();
 
-	if (!data) {
-		return (
-			<Card className="flex flex-col border overflow-hidden">
-				<CardHeader className="pb-2">
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							<FileCheck className="h-4 w-4 text-primary mb-1" />
-							<CardTitle>
-								{t("evidence.dashboard.evidence_status") || "Evidence Status"}
-							</CardTitle>
-						</div>
-						<Badge variant="outline" className="text-xs">
-							Overview
-						</Badge>
-					</div>
-				</CardHeader>
-				<CardContent className="flex-1 flex items-center justify-center py-10">
-					<div className="text-center space-y-2">
-						<div className="flex justify-center text-muted-foreground">
-							<Info className="h-10 w-10 opacity-30" />
-						</div>
-						<p className="text-center text-sm text-muted-foreground">
-							No evidence data available
-						</p>
-					</div>
-				</CardContent>
-				<CardFooter className="bg-muted/30 border-t py-3">
-					<div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
-				</CardFooter>
-			</Card>
-		);
-	}
+  if (!data) {
+    return (
+      <Card className="flex flex-col border overflow-hidden">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <CardTitle>
+                {t("evidence.dashboard.evidence_status") || "Evidence Status"}
+              </CardTitle>
+            </div>
+            <Badge variant="outline" className="text-xs">
+              Overview
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex items-center justify-center py-10">
+          <div className="text-center space-y-2">
+            <div className="flex justify-center text-muted-foreground">
+              <Info className="h-10 w-10 opacity-30" />
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              No evidence data available
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="bg-muted/30 border-t py-3">
+          <div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
+        </CardFooter>
+      </Card>
+    );
+  }
 
-	const chartData = React.useMemo(() => {
-		const items = [
-			{
-				name: t("evidence.status.published"),
-				value: data.publishedEvidence,
-				fill: CHART_COLORS.published,
-			},
-			{
-				name: t("evidence.status.draft"),
-				value: data.draftEvidence,
-				fill: CHART_COLORS.draft,
-			},
-			{
-				name: t("evidence.status.isNotRelevant"),
-				value: data.isNotRelevant,
-				fill: CHART_COLORS.not_relevant,
-			},
-		];
+  const chartData = React.useMemo(() => {
+    const items = [
+      {
+        name: t("evidence.status.published"),
+        value: data.publishedEvidence,
+        fill: CHART_COLORS.published,
+      },
+      {
+        name: t("evidence.status.draft"),
+        value: data.draftEvidence,
+        fill: CHART_COLORS.draft,
+      },
+      {
+        name: t("evidence.status.isNotRelevant"),
+        value: data.isNotRelevant,
+        fill: CHART_COLORS.not_relevant,
+      },
+    ];
 
-		return items.filter((item) => item.value);
-	}, [data, t]);
+    return items.filter((item) => item.value);
+  }, [data, t]);
 
-	const chartConfig = {
-		value: {
-			label: "Count",
-		},
-	} satisfies ChartConfig;
+  const chartConfig = {
+    value: {
+      label: "Count",
+    },
+  } satisfies ChartConfig;
 
-	// Calculate most common status
-	const mostCommonStatus = React.useMemo(() => {
-		if (!chartData.length) return null;
-		return chartData.reduce((prev, current) =>
-			prev.value > current.value ? prev : current,
-		);
-	}, [chartData]);
+  // Calculate most common status
+  const mostCommonStatus = React.useMemo(() => {
+    if (!chartData.length) return null;
+    return chartData.reduce((prev, current) =>
+      prev.value > current.value ? prev : current,
+    );
+  }, [chartData]);
 
-	return (
-		<Card className="flex flex-col border overflow-hidden">
-			<CardHeader className="pb-2">
-				<div className="flex items-center justify-between">
-					<CardTitle className="flex items-center gap-2">
-						<PieChartIcon className="h-4 w-4 text-primary" />
-						{t("evidence.dashboard.evidence_status") || "Evidence Status"}
-					</CardTitle>
-					{data.totalEvidence > 0 && mostCommonStatus && (
-						<Badge
-							className="text-xs"
-							style={{
-								backgroundColor: `${mostCommonStatus.fill}20`,
-								color: mostCommonStatus.fill,
-							}}
-						>
-							Most: {mostCommonStatus.name}
-						</Badge>
-					)}
-				</div>
+  return (
+    <Card className="flex flex-col border overflow-hidden">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            {t("evidence.dashboard.evidence_status") || "Evidence Status"}
+          </CardTitle>
+          {data.totalEvidence > 0 && mostCommonStatus && (
+            <Badge
+              className="text-xs"
+              style={{
+                backgroundColor: `${mostCommonStatus.fill}20`,
+                color: mostCommonStatus.fill,
+              }}
+            >
+              Most: {mostCommonStatus.name}
+            </Badge>
+          )}
+        </div>
 
-				<div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
-					<div
-						className="h-full bg-primary/80 transition-all"
-						style={{
-							width: `${(data.publishedEvidence / Math.max(data.totalEvidence, 1)) * 100}%`,
-						}}
-					/>
-				</div>
-			</CardHeader>
-			<CardContent className="flex-1 flex items-center justify-center">
-				<ChartContainer
-					config={chartConfig}
-					className="mx-auto h-[300px] max-w-[250px]"
-				>
-					<PieChart
-						width={250}
-						height={300}
-						margin={{
-							top: 16,
-							right: 16,
-							bottom: 16,
-							left: 16,
-						}}
-					>
-						<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-						<Pie
-							data={chartData}
-							dataKey="value"
-							nameKey="name"
-							innerRadius={60}
-							outerRadius={80}
-							paddingAngle={2}
-							strokeWidth={3}
-							stroke="hsl(var(--background))"
-							cursor="pointer"
-							animationDuration={500}
-							animationBegin={100}
-						>
-							<Label
-								content={({ viewBox }) => {
-									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-										return (
-											<g>
-												<text
-													x={viewBox.cx}
-													y={viewBox.cy}
-													textAnchor="middle"
-													dominantBaseline="middle"
-												>
-													<tspan
-														x={viewBox.cx}
-														y={viewBox.cy}
-														className="fill-foreground text-3xl font-bold"
-													>
-														{data.totalEvidence}
-													</tspan>
-													<tspan
-														x={viewBox.cx}
-														y={(viewBox.cy || 0) + 26}
-														className="fill-muted-foreground text-xs"
-													>
-														Total Evidence
-													</tspan>
-												</text>
-												<circle
-													cx={viewBox.cx}
-													cy={viewBox.cy}
-													r={54}
-													fill="none"
-													stroke="hsl(var(--border))"
-													strokeWidth={1}
-													strokeDasharray="2,2"
-												/>
-											</g>
-										);
-									}
-									return null;
-								}}
-							/>
-						</Pie>
-					</PieChart>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter className="bg-muted/30 border-t py-3">
-				<div className="flex flex-wrap gap-4 justify-center w-full py-1">
-					{chartData.map((entry) => (
-						<div key={entry.name} className="flex items-center gap-2">
-							<div
-								className="h-3 w-3 rounded-sm"
-								style={{ backgroundColor: entry.fill }}
-							/>
-							<span className="text-xs font-medium whitespace-nowrap">
-								{entry.name}
-								<span className="ml-1 text-muted-foreground">
-									({entry.value})
-								</span>
-							</span>
-						</div>
-					))}
-				</div>
-			</CardFooter>
-		</Card>
-	);
+        <div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
+          <div
+            className="h-full bg-primary/80 transition-all"
+            style={{
+              width: `${(data.publishedEvidence / Math.max(data.totalEvidence, 1)) * 100}%`,
+            }}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 flex items-center justify-center">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto h-[300px] max-w-[250px]"
+        >
+          <PieChart
+            width={250}
+            height={300}
+            margin={{
+              top: 16,
+              right: 16,
+              bottom: 16,
+              left: 16,
+            }}
+          >
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Pie
+              data={chartData}
+              dataKey="value"
+              nameKey="name"
+              innerRadius={60}
+              outerRadius={80}
+              paddingAngle={2}
+              strokeWidth={3}
+              stroke="hsl(var(--background))"
+              cursor="pointer"
+              animationDuration={500}
+              animationBegin={100}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <g>
+                        <text
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                        >
+                          <tspan
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            className="fill-foreground text-3xl font-bold"
+                          >
+                            {data.totalEvidence}
+                          </tspan>
+                          <tspan
+                            x={viewBox.cx}
+                            y={(viewBox.cy || 0) + 26}
+                            className="fill-muted-foreground text-xs"
+                          >
+                            Evidence
+                          </tspan>
+                        </text>
+                        <circle
+                          cx={viewBox.cx}
+                          cy={viewBox.cy}
+                          r={54}
+                          fill="none"
+                          stroke="hsl(var(--border))"
+                          strokeWidth={1}
+                          strokeDasharray="2,2"
+                        />
+                      </g>
+                    );
+                  }
+                  return null;
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="bg-muted/30 border-t py-3">
+        <div className="flex flex-wrap gap-4 justify-center w-full py-1">
+          {chartData.map((entry) => (
+            <div key={entry.name} className="flex items-center gap-2">
+              <div
+                className="h-3 w-3"
+                style={{ backgroundColor: entry.fill }}
+              />
+              <span className="text-xs font-medium whitespace-nowrap">
+                {entry.name}
+                <span className="ml-1 text-muted-foreground">
+                  ({entry.value})
+                </span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/all/loading.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/all/loading.tsx
index abe4f9f4b4..2138f66cd3 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/all/loading.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/evidence/all/loading.tsx
@@ -3,16 +3,14 @@ import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
 export default function Loading() {
   return (
     <DataTableSkeleton
-      columnCount={7}
+      columnCount={5}
       filterCount={2}
       cellWidths={[
         "10rem",
         "30rem",
         "10rem",
         "10rem",
-        "6rem",
-        "6rem",
-        "6rem",
+        "10rem",
       ]}
       shrinkZero
     />
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-assignee-chart.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-assignee-chart.tsx
index 97aeae5aac..4504de1c43 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-assignee-chart.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-assignee-chart.tsx
@@ -3,248 +3,246 @@
 import * as React from "react";
 
 import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardFooter,
-	CardTitle,
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-	type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
 } from "@comp/ui/chart";
 import { useI18n } from "@/locales/client";
 import { Badge } from "@comp/ui/badge";
 import { BarChart as BarChartIcon, Users, Info } from "lucide-react";
 import {
-	Bar,
-	BarChart,
-	XAxis,
-	YAxis,
-	Legend,
-	ResponsiveContainer,
-	LabelList,
+  Bar,
+  BarChart,
+  XAxis,
+  YAxis,
+  Legend,
+  ResponsiveContainer,
+  LabelList,
 } from "recharts";
 
 interface AssigneeData {
-	id: string;
-	name: string;
-	total: number;
-	published: number;
-	draft: number;
-	archived: number;
-	needs_review: number;
+  id: string;
+  name: string;
+  total: number;
+  published: number;
+  draft: number;
+  archived: number;
+  needs_review: number;
 }
 
 interface PolicyAssigneeChartProps {
-	data?: AssigneeData[] | null;
+  data?: AssigneeData[] | null;
 }
 
 const CHART_COLORS = {
-	published: "hsl(var(--chart-positive))", // green
-	draft: "hsl(var(--chart-neutral))", // yellow
-	archived: "hsl(var(--chart-warning))", // gray
-	needs_review: "hsl(var(--chart-destructive))", // red
+  published: "hsl(var(--chart-positive))", // green
+  draft: "hsl(var(--chart-neutral))", // yellow
+  archived: "hsl(var(--chart-warning))", // gray
+  needs_review: "hsl(var(--chart-destructive))", // red
 };
 
 export function PolicyAssigneeChart({ data }: PolicyAssigneeChartProps) {
-	const t = useI18n();
+  const t = useI18n();
 
-	if (!data || data.length === 0) {
-		return (
-			<Card className="flex flex-col border overflow-hidden">
-				<CardHeader className="pb-2">
-					<div className="flex items-center justify-between">
-						<CardTitle className="flex items-center gap-2">
-							<BarChartIcon className="h-4 w-4 text-primary" />
-							{t("policies.dashboard.policies_by_assignee") ||
-								"Policies by Assignee"}
-						</CardTitle>
+  if (!data || data.length === 0) {
+    return (
+      <Card className="flex flex-col border overflow-hidden">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              {t("policies.dashboard.policies_by_assignee") ||
+                "Policies by Assignee"}
+            </CardTitle>
 
-						<Badge variant="outline" className="text-xs">
-							Distribution
-						</Badge>
-					</div>
-				</CardHeader>
-				<CardContent className="flex-1 flex items-center justify-center py-10">
-					<div className="text-center space-y-2">
-						<div className="flex justify-center text-muted-foreground">
-							<Users className="h-10 w-10 opacity-30" />
-						</div>
-						<p className="text-center text-sm text-muted-foreground">
-							No policies assigned to users
-						</p>
-					</div>
-				</CardContent>
-				<CardFooter className="bg-muted/30 border-t py-3">
-					<div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
-				</CardFooter>
-			</Card>
-		);
-	}
+            <Badge variant="outline" className="text-xs">
+              Distribution
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex items-center justify-center py-10">
+          <div className="text-center space-y-2">
+            <div className="flex justify-center text-muted-foreground">
+              <Users className="h-10 w-10 opacity-30" />
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              No policies assigned to users
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="bg-muted/30 border-t py-3">
+          <div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
+        </CardFooter>
+      </Card>
+    );
+  }
 
-	// Sort assignees by total policies (descending)
-	const sortedData = React.useMemo(() => {
-		return [...data]
-			.sort((a, b) => b.total - a.total)
-			.slice(0, 4)
-			.reverse();
-	}, [data]);
+  // Sort assignees by total policies (descending)
+  const sortedData = React.useMemo(() => {
+    return [...data]
+      .sort((a, b) => b.total - a.total)
+      .slice(0, 4)
+      .reverse();
+  }, [data]);
 
-	const chartData = sortedData.map((item) => ({
-		name: item.name,
-		published: item.published,
-		draft: item.draft,
-		archived: item.archived,
-		needs_review: item.needs_review,
-	}));
+  const chartData = sortedData.map((item) => ({
+    name: item.name,
+    published: item.published,
+    draft: item.draft,
+    archived: item.archived,
+    needs_review: item.needs_review,
+  }));
 
-	const chartConfig = {
-		published: {
-			label: t("policies.status.published"),
-			color: CHART_COLORS.published,
-		},
-		draft: {
-			label: t("policies.status.draft"),
-			color: CHART_COLORS.draft,
-		},
-		archived: {
-			label: t("policies.status.archived"),
-			color: CHART_COLORS.archived,
-		},
-		needs_review: {
-			label: t("policies.status.needs_review"),
-			color: CHART_COLORS.needs_review,
-		},
-	} satisfies ChartConfig;
+  const chartConfig = {
+    published: {
+      label: t("policies.status.published"),
+      color: CHART_COLORS.published,
+    },
+    draft: {
+      label: t("policies.status.draft"),
+      color: CHART_COLORS.draft,
+    },
+    archived: {
+      label: t("policies.status.archived"),
+      color: CHART_COLORS.archived,
+    },
+    needs_review: {
+      label: t("policies.status.needs_review"),
+      color: CHART_COLORS.needs_review,
+    },
+  } satisfies ChartConfig;
 
-	// Calculate total policies and top assignee
-	const totalPolicies = React.useMemo(() => {
-		if (!data.length) return 0;
-		return data.reduce((sum, item) => sum + item.total, 0);
-	}, [data]);
+  // Calculate total policies and top assignee
+  const totalPolicies = React.useMemo(() => {
+    if (!data.length) return 0;
+    return data.reduce((sum, item) => sum + item.total, 0);
+  }, [data]);
 
-	const topAssignee = React.useMemo(() => {
-		if (!data.length) return null;
-		return data.reduce((prev, current) =>
-			prev.total > current.total ? prev : current,
-		);
-	}, [data]);
+  const topAssignee = React.useMemo(() => {
+    if (!data.length) return null;
+    return data.reduce((prev, current) =>
+      prev.total > current.total ? prev : current,
+    );
+  }, [data]);
 
-	return (
-		<Card className="flex flex-col border overflow-hidden">
-			<CardHeader className="pb-2">
-				<div className="flex items-center justify-between">
-					<CardTitle className="flex items-center gap-2">
-						<BarChartIcon className="h-4 w-4 text-primary" />
-						{t("policies.dashboard.policies_by_assignee") ||
-							"Policies by Assignee"}
-					</CardTitle>
-					{topAssignee && (
-						<Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 text-xs">
-							Top: {topAssignee.name}
-						</Badge>
-					)}
-				</div>
+  return (
+    <Card className="flex flex-col border overflow-hidden">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            {t("policies.dashboard.policies_by_assignee") ||
+              "Policies by Assignee"}
+          </CardTitle>
+          {topAssignee && (
+            <Badge className="bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400 text-xs">
+              Top: {topAssignee.name}
+            </Badge>
+          )}
+        </div>
 
-				<div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
-					<div
-						className="h-full bg-primary/80 transition-all"
-						style={{
-							width: `${totalPolicies > 0 ? 100 : 0}%`,
-							opacity: 0.7,
-						}}
-					/>
-				</div>
-			</CardHeader>
-			<CardContent className="flex-1">
-				<div className="flex flex-col h-full">
-					<div className="flex justify-between items-center mb-1 text-xs text-muted-foreground px-1">
-						<span>Assignee</span>
-						<span>Policy Count</span>
-					</div>
-					<ChartContainer config={chartConfig}>
-						<ResponsiveContainer width="100%" height={250}>
-							<BarChart
-								accessibilityLayer
-								data={chartData}
-								layout="vertical"
-								barSize={24}
-								barGap={4}
-								margin={{
-									top: 0,
-									right: 0,
-									bottom: 0,
-									left: 0,
-								}}
-							>
-								<XAxis type="number" hide />
-								<YAxis
-									dataKey="name"
-									type="category"
-									tickLine={false}
-									tickMargin={10}
-									axisLine={false}
-									tickFormatter={(value) => value.split(" ")[0]}
-									fontSize={12}
-									stroke="hsl(var(--muted-foreground))"
-								/>
-								<ChartTooltip
-									cursor={false}
-									content={<ChartTooltipContent />}
-								/>
-								<Bar
-									dataKey="published"
-									stackId="a"
-									fill={CHART_COLORS.published}
-									radius={[0, 2, 2, 0]}
-									animationDuration={800}
-									animationBegin={100}
-								/>
-								<Bar
-									dataKey="draft"
-									stackId="a"
-									fill={CHART_COLORS.draft}
-									radius={[0, 0, 0, 0]}
-									animationDuration={800}
-									animationBegin={200}
-								/>
-								<Bar
-									dataKey="archived"
-									stackId="a"
-									fill={CHART_COLORS.archived}
-									radius={[0, 0, 0, 0]}
-									animationDuration={800}
-									animationBegin={300}
-								/>
-								<Bar
-									dataKey="needs_review"
-									stackId="a"
-									fill={CHART_COLORS.needs_review}
-									radius={[0, 0, 0, 0]}
-									animationDuration={800}
-									animationBegin={400}
-								/>
-							</BarChart>
-						</ResponsiveContainer>
-					</ChartContainer>
-				</div>
-			</CardContent>
-			<CardFooter className="bg-muted/30 border-t py-3">
-				<div className="flex flex-wrap gap-4 justify-center w-full py-1">
-					{Object.entries(chartConfig).map(([key, config]) => (
-						<div key={key} className="flex items-center gap-2">
-							<div
-								className="h-3 w-3 rounded-sm"
-								style={{ backgroundColor: config.color }}
-							/>
-							<span className="text-xs font-medium">{config.label}</span>
-						</div>
-					))}
-				</div>
-			</CardFooter>
-		</Card>
-	);
+        <div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
+          <div
+            className="h-full bg-primary/80 transition-all"
+            style={{
+              width: `${totalPolicies > 0 ? 100 : 0}%`,
+              opacity: 0.7,
+            }}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1">
+        <div className="flex flex-col h-full">
+          <div className="flex justify-between items-center mb-1 text-xs text-muted-foreground px-1">
+            <span>Assignee</span>
+            <span>Policy Count</span>
+          </div>
+          <ChartContainer config={chartConfig}>
+            <ResponsiveContainer width="100%" height={250}>
+              <BarChart
+                accessibilityLayer
+                data={chartData}
+                layout="vertical"
+                barSize={24}
+                barGap={4}
+                margin={{
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                }}
+              >
+                <XAxis type="number" hide />
+                <YAxis
+                  dataKey="name"
+                  type="category"
+                  tickLine={false}
+                  tickMargin={10}
+                  axisLine={false}
+                  tickFormatter={(value) => value.split(" ")[0]}
+                  fontSize={12}
+                  stroke="hsl(var(--muted-foreground))"
+                />
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent />}
+                />
+                <Bar
+                  dataKey="published"
+                  stackId="a"
+                  fill={CHART_COLORS.published}
+                  radius={[0, 2, 2, 0]}
+                  animationDuration={800}
+                  animationBegin={100}
+                />
+                <Bar
+                  dataKey="draft"
+                  stackId="a"
+                  fill={CHART_COLORS.draft}
+                  radius={[0, 0, 0, 0]}
+                  animationDuration={800}
+                  animationBegin={200}
+                />
+                <Bar
+                  dataKey="archived"
+                  stackId="a"
+                  fill={CHART_COLORS.archived}
+                  radius={[0, 0, 0, 0]}
+                  animationDuration={800}
+                  animationBegin={300}
+                />
+                <Bar
+                  dataKey="needs_review"
+                  stackId="a"
+                  fill={CHART_COLORS.needs_review}
+                  radius={[0, 0, 0, 0]}
+                  animationDuration={800}
+                  animationBegin={400}
+                />
+              </BarChart>
+            </ResponsiveContainer>
+          </ChartContainer>
+        </div>
+      </CardContent>
+      <CardFooter className="bg-muted/30 border-t py-3">
+        <div className="flex flex-wrap gap-4 justify-center w-full py-1">
+          {Object.entries(chartConfig).map(([key, config]) => (
+            <div key={key} className="flex items-center gap-2">
+              <div
+                className="h-3 w-3"
+                style={{ backgroundColor: config.color }}
+              />
+              <span className="text-xs font-medium">{config.label}</span>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-status-chart.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-status-chart.tsx
index d897e4d803..17445aa6ed 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-status-chart.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/components/policy-status-chart.tsx
@@ -4,259 +4,257 @@ import * as React from "react";
 import { Pie, PieChart, Label, Tooltip, ResponsiveContainer } from "recharts";
 
 import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardFooter,
-	CardTitle,
+  Card,
+  CardContent,
+  CardHeader,
+  CardFooter,
+  CardTitle,
 } from "@comp/ui/card";
 import {
-	type ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
 } from "@comp/ui/chart";
 import { useI18n } from "@/locales/client";
 import { Badge } from "@comp/ui/badge";
 import {
-	PieChart as PieChartIcon,
-	BarChart as ChartIcon,
-	Info,
+  PieChart as PieChartIcon,
+  BarChart as ChartIcon,
+  Info,
 } from "lucide-react";
 
 interface PolicyOverviewData {
-	totalPolicies: number;
-	publishedPolicies: number;
-	draftPolicies: number;
-	archivedPolicies: number;
-	needsReviewPolicies: number;
+  totalPolicies: number;
+  publishedPolicies: number;
+  draftPolicies: number;
+  archivedPolicies: number;
+  needsReviewPolicies: number;
 }
 
 interface PolicyStatusChartProps {
-	data?: PolicyOverviewData | null;
+  data?: PolicyOverviewData | null;
 }
 
 const CHART_COLORS = {
-	published: "hsl(var(--chart-positive))", // green
-	draft: "hsl(var(--chart-neutral))", // yellow
-	archived: "hsl(var(--chart-warning))", // gray
-	needs_review: "hsl(var(--chart-destructive))", // red
+  published: "hsl(var(--chart-positive))", // green
+  draft: "hsl(var(--chart-neutral))", // yellow
+  archived: "hsl(var(--chart-warning))", // gray
+  needs_review: "hsl(var(--chart-destructive))", // red
 };
 
 // Custom tooltip component for the pie chart
 const StatusTooltip = ({ active, payload }: any) => {
-	if (active && payload && payload.length) {
-		const data = payload[0].payload;
-		return (
-			<div className="rounded-md border bg-background p-2 shadow-md">
-				<p className="text-xs font-medium">{data.name}</p>
-				<p className="text-xs">
-					Count: <span className="font-medium">{data.value}</span>
-				</p>
-			</div>
-		);
-	}
-	return null;
+  if (active && payload && payload.length) {
+    const data = payload[0].payload;
+    return (
+      <div className="rounded-md border bg-background p-2 shadow-md">
+        <p className="text-xs font-medium">{data.name}</p>
+        <p className="text-xs">
+          Count: <span className="font-medium">{data.value}</span>
+        </p>
+      </div>
+    );
+  }
+  return null;
 };
 
 export function PolicyStatusChart({ data }: PolicyStatusChartProps) {
-	const t = useI18n();
+  const t = useI18n();
 
-	if (!data) {
-		return (
-			<Card className="flex flex-col border overflow-hidden">
-				<CardHeader className="pb-2">
-					<div className="flex items-center justify-between">
-						<CardTitle className="flex items-center gap-2">
-							<PieChartIcon className="h-4 w-4 text-primary" />
-							{t("policies.dashboard.policy_status") || "Policy Status"}
-						</CardTitle>
-						<Badge variant="outline" className="text-xs">
-							Overview
-						</Badge>
-					</div>
-				</CardHeader>
-				<CardContent className="flex-1 flex items-center justify-center py-10">
-					<div className="text-center space-y-2">
-						<div className="flex justify-center text-muted-foreground">
-							<Info className="h-10 w-10 opacity-30" />
-						</div>
-						<p className="text-center text-sm text-muted-foreground">
-							No policy data available
-						</p>
-					</div>
-				</CardContent>
-				<CardFooter className="bg-muted/30 border-t py-3">
-					<div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
-				</CardFooter>
-			</Card>
-		);
-	}
+  if (!data) {
+    return (
+      <Card className="flex flex-col border overflow-hidden">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center gap-2">
+              {t("policies.dashboard.policy_status") || "Policy Status"}
+            </CardTitle>
+            <Badge variant="outline" className="text-xs">
+              Overview
+            </Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 flex items-center justify-center py-10">
+          <div className="text-center space-y-2">
+            <div className="flex justify-center text-muted-foreground">
+              <Info className="h-10 w-10 opacity-30" />
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              No policy data available
+            </p>
+          </div>
+        </CardContent>
+        <CardFooter className="bg-muted/30 border-t py-3">
+          <div className="flex flex-wrap gap-4 py-1 justify-center w-full" />
+        </CardFooter>
+      </Card>
+    );
+  }
 
-	const chartData = React.useMemo(() => {
-		const items = [
-			{
-				name: t("policies.status.published"),
-				value: data.publishedPolicies,
-				fill: CHART_COLORS.published,
-			},
-			{
-				name: t("policies.status.draft"),
-				value: data.draftPolicies,
-				fill: CHART_COLORS.draft,
-			},
-			{
-				name: t("policies.status.archived"),
-				value: data.archivedPolicies,
-				fill: CHART_COLORS.archived,
-			},
-			{
-				name: t("policies.status.needs_review"),
-				value: data.needsReviewPolicies,
-				fill: CHART_COLORS.needs_review,
-			},
-		];
+  const chartData = React.useMemo(() => {
+    const items = [
+      {
+        name: t("policies.status.published"),
+        value: data.publishedPolicies,
+        fill: CHART_COLORS.published,
+      },
+      {
+        name: t("policies.status.draft"),
+        value: data.draftPolicies,
+        fill: CHART_COLORS.draft,
+      },
+      {
+        name: t("policies.status.archived"),
+        value: data.archivedPolicies,
+        fill: CHART_COLORS.archived,
+      },
+      {
+        name: t("policies.status.needs_review"),
+        value: data.needsReviewPolicies,
+        fill: CHART_COLORS.needs_review,
+      },
+    ];
 
-		return items.filter((item) => item.value);
-	}, [data, t]);
+    return items.filter((item) => item.value);
+  }, [data, t]);
 
-	const chartConfig = {
-		value: {
-			label: "Count",
-		},
-	} satisfies ChartConfig;
+  const chartConfig = {
+    value: {
+      label: "Count",
+    },
+  } satisfies ChartConfig;
 
-	// Calculate most common status
-	const mostCommonStatus = React.useMemo(() => {
-		if (!chartData.length) return null;
-		return chartData.reduce((prev, current) =>
-			prev.value > current.value ? prev : current,
-		);
-	}, [chartData]);
+  // Calculate most common status
+  const mostCommonStatus = React.useMemo(() => {
+    if (!chartData.length) return null;
+    return chartData.reduce((prev, current) =>
+      prev.value > current.value ? prev : current,
+    );
+  }, [chartData]);
 
-	return (
-		<Card className="flex flex-col border overflow-hidden">
-			<CardHeader className="pb-2">
-				<div className="flex items-center justify-between">
-					<CardTitle className="flex items-center gap-2">
-						<PieChartIcon className="h-4 w-4 text-primary" />
-						{t("policies.dashboard.policy_status") || "Policy Status"}
-					</CardTitle>
+  return (
+    <Card className="flex flex-col border overflow-hidden">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2">
+            {t("policies.dashboard.policy_status") || "Policy Status"}
+          </CardTitle>
 
-					{data.totalPolicies > 0 && mostCommonStatus && (
-						<Badge
-							className="text-xs"
-							style={{
-								backgroundColor: `${mostCommonStatus.fill}20`,
-								color: mostCommonStatus.fill,
-							}}
-						>
-							Most: {mostCommonStatus.name}
-						</Badge>
-					)}
-				</div>
+          {data.totalPolicies > 0 && mostCommonStatus && (
+            <Badge
+              className="text-xs"
+              style={{
+                backgroundColor: `${mostCommonStatus.fill}20`,
+                color: mostCommonStatus.fill,
+              }}
+            >
+              Most: {mostCommonStatus.name}
+            </Badge>
+          )}
+        </div>
 
-				<div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
-					<div
-						className="h-full bg-primary/80 transition-all"
-						style={{
-							width: `${(data.publishedPolicies / Math.max(data.totalPolicies, 1)) * 100}%`,
-						}}
-					/>
-				</div>
-			</CardHeader>
-			<CardContent className="flex-1 flex items-center justify-center">
-				<ChartContainer
-					config={chartConfig}
-					className="mx-auto h-[300px] max-w-[250px]"
-				>
-					<PieChart
-						width={250}
-						height={300}
-						margin={{
-							top: 16,
-							right: 16,
-							bottom: 16,
-							left: 16,
-						}}
-					>
-						<ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-						<Pie
-							data={chartData}
-							dataKey="value"
-							nameKey="name"
-							innerRadius={60}
-							outerRadius={80}
-							paddingAngle={2}
-							strokeWidth={3}
-							stroke="hsl(var(--background))"
-							cursor="pointer"
-							animationDuration={500}
-							animationBegin={100}
-						>
-							<Label
-								content={({ viewBox }) => {
-									if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-										return (
-											<g>
-												<text
-													x={viewBox.cx}
-													y={viewBox.cy}
-													textAnchor="middle"
-													dominantBaseline="middle"
-												>
-													<tspan
-														x={viewBox.cx}
-														y={viewBox.cy}
-														className="fill-foreground text-3xl font-bold"
-													>
-														{data.totalPolicies}
-													</tspan>
-													<tspan
-														x={viewBox.cx}
-														y={(viewBox.cy || 0) + 26}
-														className="fill-muted-foreground text-xs"
-													>
-														Total Policies
-													</tspan>
-												</text>
-												<circle
-													cx={viewBox.cx}
-													cy={viewBox.cy}
-													r={54}
-													fill="none"
-													stroke="hsl(var(--border))"
-													strokeWidth={1}
-													strokeDasharray="2,2"
-												/>
-											</g>
-										);
-									}
-									return null;
-								}}
-							/>
-						</Pie>
-					</PieChart>
-				</ChartContainer>
-			</CardContent>
-			<CardFooter className="bg-muted/30 border-t py-3">
-				<div className="flex flex-wrap gap-4 justify-center w-full py-1">
-					{chartData.map((entry) => (
-						<div key={entry.name} className="flex items-center gap-2">
-							<div
-								className="h-3 w-3 rounded-sm"
-								style={{ backgroundColor: entry.fill }}
-							/>
-							<span className="text-xs font-medium whitespace-nowrap">
-								{entry.name}
-								<span className="ml-1 text-muted-foreground">
-									({entry.value})
-								</span>
-							</span>
-						</div>
-					))}
-				</div>
-			</CardFooter>
-		</Card>
-	);
+        <div className="relative h-1 w-full bg-secondary/50 rounded-full overflow-hidden mt-2">
+          <div
+            className="h-full bg-primary/80 transition-all"
+            style={{
+              width: `${(data.publishedPolicies / Math.max(data.totalPolicies, 1)) * 100}%`,
+            }}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 flex items-center justify-center">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto h-[300px] max-w-[250px]"
+        >
+          <PieChart
+            width={250}
+            height={300}
+            margin={{
+              top: 16,
+              right: 16,
+              bottom: 16,
+              left: 16,
+            }}
+          >
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+            <Pie
+              data={chartData}
+              dataKey="value"
+              nameKey="name"
+              innerRadius={60}
+              outerRadius={80}
+              paddingAngle={2}
+              strokeWidth={3}
+              stroke="hsl(var(--background))"
+              cursor="pointer"
+              animationDuration={500}
+              animationBegin={100}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <g>
+                        <text
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                        >
+                          <tspan
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            className="fill-foreground text-3xl font-bold"
+                          >
+                            {data.totalPolicies}
+                          </tspan>
+                          <tspan
+                            x={viewBox.cx}
+                            y={(viewBox.cy || 0) + 26}
+                            className="fill-muted-foreground text-xs"
+                          >
+                            Policies
+                          </tspan>
+                        </text>
+                        <circle
+                          cx={viewBox.cx}
+                          cy={viewBox.cy}
+                          r={54}
+                          fill="none"
+                          stroke="hsl(var(--border))"
+                          strokeWidth={1}
+                          strokeDasharray="2,2"
+                        />
+                      </g>
+                    );
+                  }
+                  return null;
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="bg-muted/30 border-t py-3">
+        <div className="flex flex-wrap gap-4 justify-center w-full py-1">
+          {chartData.map((entry) => (
+            <div key={entry.name} className="flex items-center gap-2">
+              <div
+                className="h-3 w-3"
+                style={{ backgroundColor: entry.fill }}
+              />
+              <span className="text-xs font-medium whitespace-nowrap">
+                {entry.name}
+                <span className="ml-1 text-muted-foreground">
+                  ({entry.value})
+                </span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </CardFooter>
+    </Card>
+  );
 }
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/page.tsx
index bdedb621b6..a8d606f717 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/page.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/(overview)/page.tsx
@@ -10,170 +10,170 @@ import Loading from "./loading";
 import { headers } from "next/headers";
 
 export default async function PoliciesOverview({
-	params,
+  params,
 }: {
-	params: Promise<{ locale: string }>;
+  params: Promise<{ locale: string }>;
 }) {
-	const { locale } = await params;
-	setStaticParamsLocale(locale);
-
-	const overview = await getPoliciesOverview();
-
-	return (
-		<Suspense fallback={<Loading />}>
-			<div className="space-y-4 sm:space-y-8">
-				<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-					<PolicyStatusChart data={overview} />
-					<PolicyAssigneeChart data={overview?.assigneeData} />
-				</div>
-			</div>
-		</Suspense>
-	);
+  const { locale } = await params;
+  setStaticParamsLocale(locale);
+
+  const overview = await getPoliciesOverview();
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <div className="space-y-4 sm:space-y-8">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          <PolicyStatusChart data={overview} />
+          <PolicyAssigneeChart data={overview?.assigneeData} />
+        </div>
+      </div>
+    </Suspense>
+  );
 }
 
 const getPoliciesOverview = async () => {
-	const session = await auth.api.getSession({
-		headers: await headers(),
-	});
-
-	if (!session?.session?.activeOrganizationId) {
-		return null;
-	}
-
-	const organizationId = session.session.activeOrganizationId;
-
-	return await db.$transaction(async (tx) => {
-		const [
-			totalPolicies,
-			publishedPolicies,
-			draftPolicies,
-			archivedPolicies,
-			needsReviewPolicies,
-			policiesByAssignee,
-			policiesByAssigneeStatus,
-		] = await Promise.all([
-			tx.policy.count({
-				where: {
-					organizationId,
-				},
-			}),
-			tx.policy.count({
-				where: {
-					organizationId,
-					status: "published",
-					isArchived: false,
-				},
-			}),
-			tx.policy.count({
-				where: {
-					organizationId,
-					status: "draft",
-					isArchived: false,
-				},
-			}),
-			tx.policy.count({
-				where: {
-					organizationId,
-					isArchived: true,
-				},
-			}),
-			tx.policy.count({
-				where: {
-					organizationId,
-					status: "needs_review",
-					isArchived: false,
-				},
-			}),
-			tx.policy.groupBy({
-				by: ["assigneeId"],
-				_count: true,
-				where: {
-					organizationId,
-					assigneeId: { not: null },
-				},
-			}),
-			tx.policy.findMany({
-				where: {
-					organizationId,
-					assigneeId: { not: null },
-				},
-				select: {
-					status: true,
-					isArchived: true,
-					assignee: {
-						select: {
-							id: true,
-							user: {
-								select: {
-									name: true,
-								},
-							},
-						},
-					},
-				},
-			}),
-		]);
-
-		// Transform the data for easier consumption by the chart component
-		// First group by owner
-		const policyDataByOwner = new Map();
-
-		for (const policy of policiesByAssigneeStatus) {
-			if (!policy.assignee) continue;
-
-			const assigneeId = policy.assignee.id;
-			if (!policyDataByOwner.has(assigneeId)) {
-				policyDataByOwner.set(assigneeId, {
-					id: assigneeId,
-					name: policy.assignee.user.name || "Unknown",
-					total: 0,
-					published: 0,
-					draft: 0,
-					archived: 0,
-					needs_review: 0,
-				});
-			}
-
-			const assigneeData = policyDataByOwner.get(assigneeId);
-			assigneeData.total += 1;
-
-			// Handle archived policies separately
-			if (policy.isArchived) {
-				assigneeData.archived += 1;
-				continue;
-			}
-
-			// Handle each status type explicitly
-			const status = policy.status;
-			if (status === "published") assigneeData.published += 1;
-			else if (status === "draft") assigneeData.draft += 1;
-			else if (status === "needs_review") assigneeData.needs_review += 1;
-		}
-
-		const assigneeData = Array.from(policyDataByOwner.values());
-
-		return {
-			totalPolicies,
-			publishedPolicies,
-			draftPolicies,
-			archivedPolicies,
-			needsReviewPolicies,
-			policiesByAssignee,
-			assigneeData,
-		};
-	});
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session?.session?.activeOrganizationId) {
+    return null;
+  }
+
+  const organizationId = session.session.activeOrganizationId;
+
+  return await db.$transaction(async (tx) => {
+    const [
+      totalPolicies,
+      publishedPolicies,
+      draftPolicies,
+      archivedPolicies,
+      needsReviewPolicies,
+      policiesByAssignee,
+      policiesByAssigneeStatus,
+    ] = await Promise.all([
+      tx.policy.count({
+        where: {
+          organizationId,
+        },
+      }),
+      tx.policy.count({
+        where: {
+          organizationId,
+          status: "published",
+          isArchived: false,
+        },
+      }),
+      tx.policy.count({
+        where: {
+          organizationId,
+          status: "draft",
+          isArchived: false,
+        },
+      }),
+      tx.policy.count({
+        where: {
+          organizationId,
+          isArchived: true,
+        },
+      }),
+      tx.policy.count({
+        where: {
+          organizationId,
+          status: "needs_review",
+          isArchived: false,
+        },
+      }),
+      tx.policy.groupBy({
+        by: ["assigneeId"],
+        _count: true,
+        where: {
+          organizationId,
+          assigneeId: { not: null },
+        },
+      }),
+      tx.policy.findMany({
+        where: {
+          organizationId,
+          assigneeId: { not: null },
+        },
+        select: {
+          status: true,
+          isArchived: true,
+          assignee: {
+            select: {
+              id: true,
+              user: {
+                select: {
+                  name: true,
+                },
+              },
+            },
+          },
+        },
+      }),
+    ]);
+
+    // Transform the data for easier consumption by the chart component
+    // First group by owner
+    const policyDataByOwner = new Map();
+
+    for (const policy of policiesByAssigneeStatus) {
+      if (!policy.assignee) continue;
+
+      const assigneeId = policy.assignee.id;
+      if (!policyDataByOwner.has(assigneeId)) {
+        policyDataByOwner.set(assigneeId, {
+          id: assigneeId,
+          name: policy.assignee.user.name || "Unknown",
+          total: 0,
+          published: 0,
+          draft: 0,
+          archived: 0,
+          needs_review: 0,
+        });
+      }
+
+      const assigneeData = policyDataByOwner.get(assigneeId);
+      assigneeData.total += 1;
+
+      // Handle archived policies separately
+      if (policy.isArchived) {
+        assigneeData.archived += 1;
+        continue;
+      }
+
+      // Handle each status type explicitly
+      const status = policy.status;
+      if (status === "published") assigneeData.published += 1;
+      else if (status === "draft") assigneeData.draft += 1;
+      else if (status === "needs_review") assigneeData.needs_review += 1;
+    }
+
+    const assigneeData = Array.from(policyDataByOwner.values());
+
+    return {
+      totalPolicies,
+      publishedPolicies,
+      draftPolicies,
+      archivedPolicies,
+      needsReviewPolicies,
+      policiesByAssignee,
+      assigneeData,
+    };
+  });
 };
 
 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("sidebar.policies"),
-	};
+  return {
+    title: t("sidebar.policies"),
+  };
 }