From ba1d15b482011e7f937ab20234def4fe54ecd09e Mon Sep 17 00:00:00 2001
From: Lewis Carhart <lewis@flexops.dev>
Date: Sun, 16 Mar 2025 15:15:32 -0400
Subject: [PATCH 1/2] Add create policy functionality with form and sheet
 components; implement schema validation and integrate with server actions for
 policy creation.

---
 .../src/actions/policies/create-new-policy.ts |  72 +++
 apps/app/src/actions/schema.ts                | 455 +++++++++---------
 .../[id]/components/SingleControlSkeleton.tsx |  54 +--
 .../forms/policies/create-new-policy.tsx      | 128 +++++
 .../components/sheets/create-policy-sheet.tsx |  55 +++
 .../tables/policies/filter-toolbar.tsx        |  29 +-
 apps/app/src/locales/en.ts                    |   7 +
 7 files changed, 536 insertions(+), 264 deletions(-)
 create mode 100644 apps/app/src/actions/policies/create-new-policy.ts
 create mode 100644 apps/app/src/components/forms/policies/create-new-policy.tsx
 create mode 100644 apps/app/src/components/sheets/create-policy-sheet.tsx

diff --git a/apps/app/src/actions/policies/create-new-policy.ts b/apps/app/src/actions/policies/create-new-policy.ts
new file mode 100644
index 0000000000..9986766374
--- /dev/null
+++ b/apps/app/src/actions/policies/create-new-policy.ts
@@ -0,0 +1,72 @@
+"use server";
+
+import { db, Departments, Frequency } from "@bubba/db";
+import { revalidatePath, revalidateTag } from "next/cache";
+import { authActionClient } from "../safe-action";
+import { createPolicySchema } from "../schema";
+
+export const createPolicyAction = authActionClient
+	.schema(createPolicySchema)
+	.metadata({
+		name: "create-policy",
+		track: {
+			event: "create-policy",
+			channel: "server",
+		},
+	})
+	.action(async ({ parsedInput, ctx }) => {
+		const { title, description, frameworkIds, controlIds } = parsedInput;
+		const { user } = ctx;
+
+		if (!user || !user.organizationId) {
+			return {
+				success: false,
+				error: "Not authorized",
+			};
+		}
+
+		try {
+			const policy = await db.policy.create({
+				data: {
+					slug: title,
+					name: title,
+					description,
+					content: [
+						{ type: "paragraph", content: [{ type: "text", text: "" }] },
+					],
+					usedBy: JSON.stringify([]),
+					policyFrameworks: {
+						create: frameworkIds.map((id) => ({ frameworkId: id })),
+					},
+					PolicyControl: {
+						create: controlIds.map((id) => ({ controlId: id })),
+					},
+				},
+			});
+
+			await db.organizationPolicy.create({
+				data: {
+					organizationId: user.organizationId,
+					policyId: policy.id,
+					ownerId: user.id,
+					department: Departments.none,
+					frequency: Frequency.monthly,
+				},
+			});
+
+			revalidatePath("/policies");
+			revalidateTag("policies");
+
+			return {
+				success: true,
+				policyId: policy.id,
+			};
+		} catch (error) {
+			console.error(error);
+
+			return {
+				success: false,
+				error: "Failed to create policy",
+			};
+		}
+	});
diff --git a/apps/app/src/actions/schema.ts b/apps/app/src/actions/schema.ts
index 55f3e9d9f4..9e9811edea 100644
--- a/apps/app/src/actions/schema.ts
+++ b/apps/app/src/actions/schema.ts
@@ -1,327 +1,334 @@
 import {
-  Departments,
-  Frequency,
-  PolicyStatus,
-  RiskCategory,
-  RiskStatus,
-  RiskTaskStatus,
-  VendorCategory,
-  VendorStatus,
+	Departments,
+	Frequency,
+	PolicyStatus,
+	RiskCategory,
+	RiskStatus,
+	RiskTaskStatus,
+	VendorCategory,
+	VendorStatus,
 } from "@bubba/db";
 import { z } from "zod";
 
 export const organizationSchema = z.object({
-  fullName: z.string().min(1, "Full name is required"),
-  name: z.string().min(1, "Name is required"),
-  website: z.string().url("Must be a valid URL"),
-  subdomain: z.string().min(1, "Subdomain is required").optional(),
+	fullName: z.string().min(1, "Full name is required"),
+	name: z.string().min(1, "Name is required"),
+	website: z.string().url("Must be a valid URL"),
+	subdomain: z.string().min(1, "Subdomain is required").optional(),
 });
 
 export const organizationNameSchema = z.object({
-  name: z
-    .string()
-    .min(1, "Organization name is required")
-    .max(255, "Organization name cannot exceed 255 characters"),
+	name: z
+		.string()
+		.min(1, "Organization name is required")
+		.max(255, "Organization name cannot exceed 255 characters"),
 });
 
 export const subdomainAvailabilitySchema = z.object({
-  subdomain: z
-    .string()
-    .min(1, "Subdomain is required")
-    .max(255, "Subdomain cannot exceed 255 characters")
-    .regex(/^[a-z0-9-]+$/, {
-      message:
-        "Subdomain can only contain lowercase letters, numbers, and hyphens",
-    }),
+	subdomain: z
+		.string()
+		.min(1, "Subdomain is required")
+		.max(255, "Subdomain cannot exceed 255 characters")
+		.regex(/^[a-z0-9-]+$/, {
+			message:
+				"Subdomain can only contain lowercase letters, numbers, and hyphens",
+		}),
 });
 
 export const uploadSchema = z.object({
-  file: z.instanceof(File),
-  organizationId: z.string().uuid(),
+	file: z.instanceof(File),
+	organizationId: z.string().uuid(),
 });
 
 export const deleteOrganizationSchema = z.object({
-  id: z.string().uuid(),
-  organizationId: z.string().uuid(),
+	id: z.string().uuid(),
+	organizationId: z.string().uuid(),
 });
 
 export const sendFeedbackSchema = z.object({
-  feedback: z.string(),
+	feedback: z.string(),
 });
 
 export const updaterMenuSchema = z.array(
-  z.object({
-    path: z.string(),
-    name: z.string(),
-  })
+	z.object({
+		path: z.string(),
+		name: z.string(),
+	}),
 );
 
 export const organizationWebsiteSchema = z.object({
-  website: z.string().url().max(255),
+	website: z.string().url().max(255),
 });
 
 // Risks
 export const createRiskSchema = z.object({
-  title: z
-    .string({
-      required_error: "Risk name is required",
-    })
-    .min(1, {
-      message: "Risk name should be at least 1 character",
-    })
-    .max(100, {
-      message: "Risk name should be at most 100 characters",
-    }),
-  description: z
-    .string({
-      required_error: "Risk description is required",
-    })
-    .min(1, {
-      message: "Risk description should be at least 1 character",
-    })
-    .max(255, {
-      message: "Risk description should be at most 255 characters",
-    }),
-  category: z.nativeEnum(RiskCategory, {
-    required_error: "Risk category is required",
-  }),
-  department: z.nativeEnum(Departments, {
-    required_error: "Risk department is required",
-  }),
-  ownerId: z.string({
-    required_error: "You must assign an owner to the risk",
-  }),
+	title: z
+		.string({
+			required_error: "Risk name is required",
+		})
+		.min(1, {
+			message: "Risk name should be at least 1 character",
+		})
+		.max(100, {
+			message: "Risk name should be at most 100 characters",
+		}),
+	description: z
+		.string({
+			required_error: "Risk description is required",
+		})
+		.min(1, {
+			message: "Risk description should be at least 1 character",
+		})
+		.max(255, {
+			message: "Risk description should be at most 255 characters",
+		}),
+	category: z.nativeEnum(RiskCategory, {
+		required_error: "Risk category is required",
+	}),
+	department: z.nativeEnum(Departments, {
+		required_error: "Risk department is required",
+	}),
+	ownerId: z.string({
+		required_error: "You must assign an owner to the risk",
+	}),
 });
 
 export const updateRiskSchema = z.object({
-  id: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  title: z.string().min(1, {
-    message: "Risk title is required",
-  }),
-  description: z.string().min(1, {
-    message: "Risk description is required",
-  }),
-  category: z.nativeEnum(RiskCategory, {
-    required_error: "Risk category is required",
-  }),
-  department: z.nativeEnum(Departments, {
-    required_error: "Risk department is required",
-  }),
-  ownerId: z.string({
-    required_error: "You must assign an owner to the risk",
-  }),
-  status: z.nativeEnum(RiskStatus, {
-    required_error: "Risk status is required",
-  }),
+	id: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	title: z.string().min(1, {
+		message: "Risk title is required",
+	}),
+	description: z.string().min(1, {
+		message: "Risk description is required",
+	}),
+	category: z.nativeEnum(RiskCategory, {
+		required_error: "Risk category is required",
+	}),
+	department: z.nativeEnum(Departments, {
+		required_error: "Risk department is required",
+	}),
+	ownerId: z.string({
+		required_error: "You must assign an owner to the risk",
+	}),
+	status: z.nativeEnum(RiskStatus, {
+		required_error: "Risk status is required",
+	}),
 });
 
 export const createRiskCommentSchema = z.object({
-  riskId: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  content: z
-    .string()
-    .min(1, {
-      message: "Comment content is required",
-    })
-    .max(1000, {
-      message: "Comment content should be at most 1000 characters",
-    }),
+	riskId: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	content: z
+		.string()
+		.min(1, {
+			message: "Comment content is required",
+		})
+		.max(1000, {
+			message: "Comment content should be at most 1000 characters",
+		}),
 });
 
 export const createTaskSchema = z.object({
-  riskId: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  title: z.string().min(1, {
-    message: "Task title is required",
-  }),
-  description: z.string().min(1, {
-    message: "Task description is required",
-  }),
-  dueDate: z.date().optional(),
-  ownerId: z
-    .string({
-      required_error: "You must assign an owner to the task",
-    })
-    .min(1, {
-      message: "You must assign an owner to the task",
-    }),
+	riskId: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	title: z.string().min(1, {
+		message: "Task title is required",
+	}),
+	description: z.string().min(1, {
+		message: "Task description is required",
+	}),
+	dueDate: z.date().optional(),
+	ownerId: z
+		.string({
+			required_error: "You must assign an owner to the task",
+		})
+		.min(1, {
+			message: "You must assign an owner to the task",
+		}),
 });
 
 export const updateTaskSchema = z.object({
-  id: z.string().min(1, {
-    message: "Task ID is required",
-  }),
-  title: z.string().optional(),
-  description: z.string().optional(),
-  dueDate: z.date().optional(),
-  status: z.nativeEnum(RiskTaskStatus, {
-    required_error: "Task status is required",
-  }),
-  ownerId: z.string({
-    required_error: "You must assign an owner to the task",
-  }),
+	id: z.string().min(1, {
+		message: "Task ID is required",
+	}),
+	title: z.string().optional(),
+	description: z.string().optional(),
+	dueDate: z.date().optional(),
+	status: z.nativeEnum(RiskTaskStatus, {
+		required_error: "Task status is required",
+	}),
+	ownerId: z.string({
+		required_error: "You must assign an owner to the task",
+	}),
 });
 
 export const createTaskCommentSchema = z.object({
-  riskId: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  taskId: z.string().min(1, {
-    message: "Task ID is required",
-  }),
-  content: z
-    .string()
-    .min(1, {
-      message: "Comment content is required",
-    })
-    .max(1000, {
-      message: "Comment content should be at most 1000 characters",
-    }),
+	riskId: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	taskId: z.string().min(1, {
+		message: "Task ID is required",
+	}),
+	content: z
+		.string()
+		.min(1, {
+			message: "Comment content is required",
+		})
+		.max(1000, {
+			message: "Comment content should be at most 1000 characters",
+		}),
 });
 
 export const uploadTaskFileSchema = z.object({
-  riskId: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  taskId: z.string().min(1, {
-    message: "Task ID is required",
-  }),
+	riskId: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	taskId: z.string().min(1, {
+		message: "Task ID is required",
+	}),
 });
 
 // Integrations
 export const deleteIntegrationConnectionSchema = z.object({
-  integrationId: z.string().min(1, {
-    message: "Integration ID is required",
-  }),
+	integrationId: z.string().min(1, {
+		message: "Integration ID is required",
+	}),
 });
 
 export const createIntegrationSchema = z.object({
-  integrationId: z.string().min(1, {
-    message: "Integration ID is required",
-  }),
+	integrationId: z.string().min(1, {
+		message: "Integration ID is required",
+	}),
 });
 
 // Seed Data
 export const seedDataSchema = z.object({
-  organizationId: z.string(),
+	organizationId: z.string(),
 });
 
 export const updateInherentRiskSchema = z.object({
-  id: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  probability: z.number().min(1).max(10),
-  impact: z.number().min(1).max(10),
+	id: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	probability: z.number().min(1).max(10),
+	impact: z.number().min(1).max(10),
 });
 
 export const updateResidualRiskSchema = z.object({
-  id: z.string().min(1, {
-    message: "Risk ID is required",
-  }),
-  probability: z.number().min(1).max(10),
-  impact: z.number().min(1).max(10),
+	id: z.string().min(1, {
+		message: "Risk ID is required",
+	}),
+	probability: z.number().min(1).max(10),
+	impact: z.number().min(1).max(10),
 });
 
 export const vendorContactSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  email: z.string().email("Invalid email address"),
-  role: z.string().min(1, "Role is required"),
+	name: z.string().min(1, "Name is required"),
+	email: z.string().email("Invalid email address"),
+	role: z.string().min(1, "Role is required"),
 });
 
 export const createVendorSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  website: z.string().url("Must be a valid URL"),
-  description: z.string().min(1, "Description is required"),
-  category: z.nativeEnum(VendorCategory),
-  ownerId: z.string().optional(),
-  contacts: z
-    .array(vendorContactSchema)
-    .min(1, "At least one contact is required"),
+	name: z.string().min(1, "Name is required"),
+	website: z.string().url("Must be a valid URL"),
+	description: z.string().min(1, "Description is required"),
+	category: z.nativeEnum(VendorCategory),
+	ownerId: z.string().optional(),
+	contacts: z
+		.array(vendorContactSchema)
+		.min(1, "At least one contact is required"),
 });
 
 export const updateVendorSchema = z.object({
-  id: z.string(),
-  name: z.string().min(1, "Name is required"),
-  website: z.string().url("Must be a valid URL"),
-  description: z.string().min(1, "Description is required"),
-  category: z.nativeEnum(VendorCategory),
-  status: z.nativeEnum(VendorStatus),
-  ownerId: z.string().optional(),
-  contacts: z
-    .array(vendorContactSchema)
-    .min(1, "At least one contact is required"),
+	id: z.string(),
+	name: z.string().min(1, "Name is required"),
+	website: z.string().url("Must be a valid URL"),
+	description: z.string().min(1, "Description is required"),
+	category: z.nativeEnum(VendorCategory),
+	status: z.nativeEnum(VendorStatus),
+	ownerId: z.string().optional(),
+	contacts: z
+		.array(vendorContactSchema)
+		.min(1, "At least one contact is required"),
 });
 
 export const createVendorCommentSchema = z.object({
-  vendorId: z.string(),
-  content: z.string().min(1),
+	vendorId: z.string(),
+	content: z.string().min(1),
 });
 
 export const updateVendorRiskSchema = z.object({
-  id: z.string(),
-  inherent_risk: z.enum(["low", "medium", "high", "unknown"]).optional(),
-  residual_risk: z.enum(["low", "medium", "high", "unknown"]).optional(),
+	id: z.string(),
+	inherent_risk: z.enum(["low", "medium", "high", "unknown"]).optional(),
+	residual_risk: z.enum(["low", "medium", "high", "unknown"]).optional(),
 });
 
 // Policies
+export const createPolicySchema = z.object({
+	title: z.string(),
+	description: z.string(),
+	frameworkIds: z.array(z.string()),
+	controlIds: z.array(z.string()),
+});
+
 export const updatePolicySchema = z.object({
-  id: z.string(),
-  content: z.any(),
+	id: z.string(),
+	content: z.any(),
 });
 
 export const assistantSettingsSchema = z.object({
-  enabled: z.boolean().optional(),
+	enabled: z.boolean().optional(),
 });
 
 export const createEmployeeSchema = z.object({
-  name: z.string().min(1, "Name is required"),
-  email: z.string().email("Invalid email address"),
-  department: z.nativeEnum(Departments, {
-    required_error: "Department is required",
-  }),
-  externalEmployeeId: z.string().optional(),
-  isActive: z.boolean().default(true),
+	name: z.string().min(1, "Name is required"),
+	email: z.string().email("Invalid email address"),
+	department: z.nativeEnum(Departments, {
+		required_error: "Department is required",
+	}),
+	externalEmployeeId: z.string().optional(),
+	isActive: z.boolean().default(true),
 });
 
 export const updatePolicyOverviewSchema = z.object({
-  id: z.string(),
-  title: z.string(),
-  description: z.string(),
-  isRequiredToSign: z.enum(["required", "not_required"]).optional(),
+	id: z.string(),
+	title: z.string(),
+	description: z.string(),
+	isRequiredToSign: z.enum(["required", "not_required"]).optional(),
 });
 
 export const updatePolicyFormSchema = z.object({
-  id: z.string(),
-  status: z.nativeEnum(PolicyStatus),
-  ownerId: z.string(),
-  department: z.nativeEnum(Departments),
-  review_frequency: z.nativeEnum(Frequency),
-  review_date: z.date(),
-  isRequiredToSign: z.enum(["required", "not_required"]).optional(),
+	id: z.string(),
+	status: z.nativeEnum(PolicyStatus),
+	ownerId: z.string(),
+	department: z.nativeEnum(Departments),
+	review_frequency: z.nativeEnum(Frequency),
+	review_date: z.date(),
+	isRequiredToSign: z.enum(["required", "not_required"]).optional(),
 });
 
 export const apiKeySchema = z.object({
-  name: z
-    .string()
-    .min(1, { message: "Name is required" })
-    .max(64, { message: "Name must be less than 64 characters" }),
-  expiresAt: z.enum(["30days", "90days", "1year", "never"]),
+	name: z
+		.string()
+		.min(1, { message: "Name is required" })
+		.max(64, { message: "Name must be less than 64 characters" }),
+	expiresAt: z.enum(["30days", "90days", "1year", "never"]),
 });
 
 export const createPolicyCommentSchema = z.object({
-  policyId: z.string().min(1, {
-    message: "Policy ID is required",
-  }),
-  content: z
-    .string()
-    .min(1, {
-      message: "Comment content is required",
-    })
-    .max(1000, {
-      message: "Comment content should be at most 1000 characters",
-    }),
+	policyId: z.string().min(1, {
+		message: "Policy ID is required",
+	}),
+	content: z
+		.string()
+		.min(1, {
+			message: "Comment content is required",
+		})
+		.max(1000, {
+			message: "Comment content should be at most 1000 characters",
+		}),
 });
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/overview/frameworks/controls/[id]/components/SingleControlSkeleton.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/overview/frameworks/controls/[id]/components/SingleControlSkeleton.tsx
index c591f2589e..fb8a0d051f 100644
--- a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/overview/frameworks/controls/[id]/components/SingleControlSkeleton.tsx
+++ b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/overview/frameworks/controls/[id]/components/SingleControlSkeleton.tsx
@@ -3,32 +3,32 @@ import { CardHeader, CardContent, CardTitle } from "@bubba/ui/card";
 import { Card } from "@bubba/ui/card";
 
 export const SingleControlSkeleton = () => {
-	return (
-		<div className="max-w-[1200px] mx-auto">
-			<div className="space-y-8">
-				<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-					<Card>
-						<CardHeader>
-							<div className="h-6 w-3/4 bg-muted animate-pulse rounded" />
-						</CardHeader>
-						<CardContent>
-							<div className="h-16 bg-muted animate-pulse rounded" />
-						</CardContent>
-					</Card>
-					<Card>
-						<CardHeader>
-							<CardTitle>Domain</CardTitle>
-						</CardHeader>
-						<CardContent>
-							<div className="h-4 w-1/2 bg-muted animate-pulse rounded" />
-						</CardContent>
-					</Card>
-				</div>
+  return (
+    <div className="max-w-[1200px] mx-auto">
+      <div className="space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Card>
+            <CardHeader>
+              <div className="h-6 w-3/4 bg-muted animate-pulse rounded" />
+            </CardHeader>
+            <CardContent>
+              <div className="h-16 bg-muted animate-pulse rounded" />
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Domain</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="h-4 w-1/2 bg-muted animate-pulse rounded" />
+            </CardContent>
+          </Card>
+        </div>
 
-				<div className="flex flex-col gap-2">
-					<div className="w-full h-48 bg-muted/50 animate-pulse rounded-md" />
-				</div>
-			</div>
-		</div>
-	);
+        <div className="flex flex-col gap-2">
+          <div className="w-full h-48 bg-muted/50 animate-pulse" />
+        </div>
+      </div>
+    </div>
+  );
 };
diff --git a/apps/app/src/components/forms/policies/create-new-policy.tsx b/apps/app/src/components/forms/policies/create-new-policy.tsx
new file mode 100644
index 0000000000..24135e6bf0
--- /dev/null
+++ b/apps/app/src/components/forms/policies/create-new-policy.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { createPolicyAction } from "@/actions/policies/create-new-policy";
+import { createPolicySchema } from "@/actions/schema";
+import { useI18n } from "@/locales/client";
+import { Button } from "@bubba/ui/button";
+import { Textarea } from "@bubba/ui/textarea";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useAction } from "next-safe-action/hooks";
+import { useQueryState } from "nuqs";
+import { Input } from "@bubba/ui/input";
+import { ArrowRightIcon } from "lucide-react";
+import { toast } from "sonner";
+import type { z } from "zod";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@bubba/ui/accordion";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@bubba/ui/form";
+import React from "react";
+
+export function CreateNewPolicyForm() {
+  const t = useI18n();
+  const [_, setCreatePolicySheet] = useQueryState("create-policy-sheet");
+
+  const createPolicy = useAction(createPolicyAction, {
+    onSuccess: () => {
+      toast.success(t("policies.new.success"));
+      setCreatePolicySheet(null);
+    },
+    onError: () => {
+      toast.error(t("policies.new.error"));
+    }
+  })
+
+  const form = useForm<z.infer<typeof createPolicySchema>>({
+    resolver: zodResolver(createPolicySchema),
+    defaultValues: {
+      title: "",
+      description: "",
+      frameworkIds: [],
+      controlIds: [],
+    }
+  });
+
+  const onSubmit = (data: z.infer<typeof createPolicySchema>) => {
+    createPolicy.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={["policy"]}>
+              <AccordionItem value="policy">
+                <AccordionTrigger>{t("policies.new.details")}</AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("policies.new.title")}</FormLabel>
+                          <FormControl>
+                            <Input
+                              {...field}
+                              autoFocus
+                              className="mt-3"
+                              placeholder={t("policies.new.title")}
+                              autoCorrect="off"
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                    <FormField
+                      control={form.control}
+                      name="description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>{t("policies.new.description")}</FormLabel>
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              className="mt-3 min-h-[80px]"
+                              placeholder={t("policies.new.description")}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          </div>
+        </div>
+
+        <div className="flex justify-end mt-4">
+          <Button
+            type="submit"
+            variant="action"
+            disabled={createPolicy.status === "executing"}
+          >
+            <div className="flex items-center justify-center">
+              {t("common.actions.save")}
+              <ArrowRightIcon className="ml-2 h-4 w-4" />
+            </div>
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
\ No newline at end of file
diff --git a/apps/app/src/components/sheets/create-policy-sheet.tsx b/apps/app/src/components/sheets/create-policy-sheet.tsx
new file mode 100644
index 0000000000..c98fa1014f
--- /dev/null
+++ b/apps/app/src/components/sheets/create-policy-sheet.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useI18n } from "@/locales/client";
+import { Button } from "@bubba/ui/button";
+import { Drawer, DrawerContent, DrawerTitle } from "@bubba/ui/drawer";
+import { useMediaQuery } from "@bubba/ui/hooks";
+import { ScrollArea } from "@bubba/ui/scroll-area";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@bubba/ui/sheet";
+import { X } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { CreateNewPolicyForm } from "../forms/policies/create-new-policy";
+
+export function CreatePolicySheet() {
+  const t = useI18n();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [open, setOpen] = useQueryState("create-policy-sheet");
+  const isOpen = Boolean(open);
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open ? "true" : null);
+  }
+
+  if (isDesktop) {
+    return (
+      <Sheet open={isOpen} onOpenChange={handleOpenChange}>
+        <SheetContent stack>
+          <SheetHeader className="mb-8 flex justify-between items-center flex-row">
+            <SheetTitle>{t("policies.create_new")}</SheetTitle>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="p-0 m-0 size-auto hover:bg-transparent"
+              onClick={() => setOpen(null)}
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </SheetHeader>
+
+          <ScrollArea className="h-full p-0 pb-[100px]" hideScrollbar>
+            <CreateNewPolicyForm />
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Drawer open={isOpen} onOpenChange={handleOpenChange}>
+      <DrawerTitle hidden>{t("policies.create_new")}</DrawerTitle>
+      <DrawerContent className="p-6">
+        <CreateNewPolicyForm />
+      </DrawerContent>
+    </Drawer>
+  )
+}
\ No newline at end of file
diff --git a/apps/app/src/components/tables/policies/filter-toolbar.tsx b/apps/app/src/components/tables/policies/filter-toolbar.tsx
index 0d16a3ffcb..d3bee4f878 100644
--- a/apps/app/src/components/tables/policies/filter-toolbar.tsx
+++ b/apps/app/src/components/tables/policies/filter-toolbar.tsx
@@ -18,6 +18,8 @@ import { useQueryState } from "nuqs";
 import { useTransition } from "react";
 import { useCallback, useState, useEffect } from "react";
 import type { User } from "next-auth";
+import { usePathname, useSearchParams, useRouter } from "next/navigation";
+import { CreatePolicySheet } from "@/components/sheets/create-policy-sheet";
 
 interface FilterToolbarProps {
   isEmpty?: boolean;
@@ -25,7 +27,11 @@ interface FilterToolbarProps {
 }
 
 export function FilterToolbar({ isEmpty = false, users }: FilterToolbarProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
   const t = useI18n();
+  const [open, setOpen] = useQueryState("create-policy-sheet");
   const [isPending, startTransition] = useTransition();
   const [searchInput, setSearchInput] = useState<string>("");
 
@@ -53,7 +59,6 @@ export function FilterToolbar({ isEmpty = false, users }: FilterToolbarProps) {
     parse: (value) => value || null,
   });
 
-  // Initialize searchInput with the current search value
   useEffect(() => {
     setSearchInput(search || "");
   }, [search]);
@@ -121,12 +126,10 @@ export function FilterToolbar({ isEmpty = false, users }: FilterToolbarProps) {
         </div>
 
         <div className="md:hidden">
-          <Link href="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/policies/new">
-            <Button variant="action">
-              <Plus className="h-4 w-4" />
-              {t("policies.create_new")}
-            </Button>
-          </Link>
+          <Button onClick={() => setOpen("true")} variant="action">
+            <Plus className="h-4 w-4" />
+            {t("common.actions.addNew")}
+          </Button>
         </div>
       </div>
 
@@ -178,13 +181,13 @@ export function FilterToolbar({ isEmpty = false, users }: FilterToolbarProps) {
           </Button>
         )}
 
-        <Link href="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/policies/new">
-          <Button variant="action">
-            <Plus className="h-4 w-4" />
-            {t("policies.create_new")}
-          </Button>
-        </Link>
+        <Button variant="action" onClick={() => setOpen("true")}>
+          <Plus className="h-4 w-4" />
+          {t("policies.create_new")}
+        </Button>
       </div>
+
+      <CreatePolicySheet />
     </div>
   );
 }
diff --git a/apps/app/src/locales/en.ts b/apps/app/src/locales/en.ts
index 51886ed3c0..dd25b312c0 100644
--- a/apps/app/src/locales/en.ts
+++ b/apps/app/src/locales/en.ts
@@ -359,6 +359,13 @@ export default {
 				signature_requirement_placeholder: "Select signature requirement",
 			},
 		},
+		new: {
+			success: "Policy successfully created",
+			error: "Failed to create policy",
+			details: "Policy Details",
+			title: "Enter a title for the policy",
+			description: "Enter a description for the policy",
+		},
 		table: {
 			name: "Policy Name",
 			statuses: {

From 732a96b121bcf4875154bfaf25df67ae0d9724e5 Mon Sep 17 00:00:00 2001
From: Languine Bot <bot@languine.ai>
Date: Sun, 16 Mar 2025 19:16:43 +0000
Subject: [PATCH 2/2] chore: (i18n) update translations using Languine.ai

---
 apps/app/languine.lock     | 5 +++++
 apps/app/src/locales/es.ts | 7 +++++++
 apps/app/src/locales/fr.ts | 7 +++++++
 apps/app/src/locales/no.ts | 7 +++++++
 apps/app/src/locales/pt.ts | 7 +++++++
 5 files changed, 33 insertions(+)

diff --git a/apps/app/languine.lock b/apps/app/languine.lock
index 348fc97ba0..9109e6f58f 100644
--- a/apps/app/languine.lock
+++ b/apps/app/languine.lock
@@ -239,6 +239,11 @@ files:
     policies.overview.form.signature_not_required: 55abefe222df069df1dd008e45614832
     policies.overview.form.signature_requirement: 1841e3cd80cda4b097bcf4891c76c8da
     policies.overview.form.signature_requirement_placeholder: cc5fbf3cb132bc8fa226997c1834d3a9
+    policies.new.success: d7b87036c6d6a95d84f236c89828f888
+    policies.new.error: 27d950f3be4610eff0e638c7a3c51d30
+    policies.new.details: 8178fb068d06b0f32a7b0103e832b231
+    policies.new.title: 25d72a7ee4bef3aad40c3ce27ea4638f
+    policies.new.description: 001e50b49cb3ad5e87da8955bb97233a
     policies.table.name: 002f7378a5fcfc2f66cfea851a7fd5f4
     policies.table.statuses.draft: f03ab16cd58372c77ba45a3d9a5a1cb9
     policies.table.statuses.published: 9b9d8a976b42e0bd66381797644943d5
diff --git a/apps/app/src/locales/es.ts b/apps/app/src/locales/es.ts
index a702c361b6..98e161c3bc 100644
--- a/apps/app/src/locales/es.ts
+++ b/apps/app/src/locales/es.ts
@@ -357,6 +357,13 @@ export default {
         signature_requirement: "Requisito de firma",
         signature_requirement_placeholder: "Seleccionar requisito de firma"
       }
+    },
+    "new": {
+      success: "Política creada con éxito",
+      error: "Error al crear la política",
+      details: "Detalles de la política",
+      title: "Ingrese un título para la política",
+      description: "Ingrese una descripción para la política"
     }
   },
   evidence_tasks: {
diff --git a/apps/app/src/locales/fr.ts b/apps/app/src/locales/fr.ts
index 1280958ad5..62a3b1dc27 100644
--- a/apps/app/src/locales/fr.ts
+++ b/apps/app/src/locales/fr.ts
@@ -357,6 +357,13 @@ export default {
         signature_requirement: "Exigence de signature",
         signature_requirement_placeholder: "Sélectionner l'exigence de signature"
       }
+    },
+    "new": {
+      success: "Politique créée avec succès",
+      error: "Échec de la création de la politique",
+      details: "Détails de la politique",
+      title: "Entrez un titre pour la politique",
+      description: "Entrez une description pour la politique"
     }
   },
   evidence_tasks: {
diff --git a/apps/app/src/locales/no.ts b/apps/app/src/locales/no.ts
index 7b16ff3209..1436074ba7 100644
--- a/apps/app/src/locales/no.ts
+++ b/apps/app/src/locales/no.ts
@@ -357,6 +357,13 @@ export default {
         signature_requirement: "Signaturkrav",
         signature_requirement_placeholder: "Velg signaturkrav"
       }
+    },
+    "new": {
+      success: "Policy opprettet",
+      error: "Feil ved oppretting av policy",
+      details: "Policy Detaljer",
+      title: "Skriv inn en tittel for policyen",
+      description: "Skriv inn en beskrivelse for policyen"
     }
   },
   evidence_tasks: {
diff --git a/apps/app/src/locales/pt.ts b/apps/app/src/locales/pt.ts
index 5c14dfb03e..d7b446708f 100644
--- a/apps/app/src/locales/pt.ts
+++ b/apps/app/src/locales/pt.ts
@@ -357,6 +357,13 @@ export default {
         signature_requirement: "Requisito de Assinatura",
         signature_requirement_placeholder: "Selecionar requisito de assinatura"
       }
+    },
+    "new": {
+      success: "Política criada com sucesso",
+      error: "Falha ao criar a política",
+      details: "Detalhes da Política",
+      title: "Insira um título para a política",
+      description: "Insira uma descrição para a política"
     }
   },
   evidence_tasks: {