Add policy comments functionality

apps/app/src/actions/policies/create-policy-comment.ts

@@ -0,0 +1,38 @@
+"use server";
+
+import { db } from "@bubba/db";
+import { revalidatePath, revalidateTag } from "next/cache";
+import { authActionClient } from "../safe-action";
+import { createPolicyCommentSchema } from "../schema";
+
+export const createPolicyCommentAction = authActionClient
+  .schema(createPolicyCommentSchema)
+  .metadata({
+    name: "create-policy-comment",
+    track: {
+      event: "create-policy-comment",
+      channel: "server",
+    },
+  })
+  .action(async ({ parsedInput, ctx }) => {
+    const { policyId, content } = parsedInput;
+    const { user } = ctx;
+
+    if (!user.id || !user.organizationId) {
+      throw new Error("Invalid user input");
+    }
+
+    await db.policyComments.create({
+      data: {
+        organizationPolicyId: policyId,
+        content,
+        ownerId: user.id,
+        organizationId: user.organizationId,
+      },
+    });
+
+    revalidatePath(`/policies/all/${policyId}`);
+    revalidateTag(`policy_${user.organizationId}`);
+
+    return { success: true };
+  });

apps/app/src/actions/schema.ts

@@ -309,3 +309,17 @@ export const apiKeySchema = z.object({
     .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",
+    }),
+});

apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/[policyId]/page.tsx

@@ -1,4 +1,5 @@
 import { auth } from "@/auth";
+import { PolicyComment } from "@/components/policies/policy-comments";
 import { PolicyOverview } from "@/components/policies/policy-overview";
 import { getI18n } from "@/locales/server";
 import { db } from "@bubba/db";
@@ -8,71 +9,73 @@ import { unstable_cache } from "next/cache";
 import { redirect } from "next/navigation";
 
 export default async function PolicyDetails({
-  params,
+	params,
 }: {
-  params: Promise<{ locale: string; policyId: string }>;
+	params: Promise<{ locale: string; policyId: string }>;
 }) {
-  const { locale, policyId } = await params;
+	const { locale, policyId } = await params;
 
-  setStaticParamsLocale(locale);
+	setStaticParamsLocale(locale);
 
-  const session = await auth();
-  const organizationId = session?.user.organizationId;
+	const session = await auth();
+	const organizationId = session?.user.organizationId;
 
-  if (!organizationId) {
-    redirect("/");
-  }
+	if (!organizationId) {
+		redirect("/");
+	}
 
-  const policy = await getPolicy(policyId, organizationId);
-  const users = await getUsers(organizationId);
+	const policy = await getPolicy(policyId, organizationId);
+	const users = await getUsers(organizationId);
 
-  if (!policy) {
-    redirect("/policies");
-  }
+	if (!policy) {
+		redirect("/policies");
+	}
 
-  return (
-    <div className="flex flex-col gap-4">
-      <PolicyOverview policy={policy} users={users} />
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-4">
+			<PolicyOverview policy={policy} users={users} />
+			<PolicyComment policy={policy} users={users} />
+		</div>
+	);
 }
 
 export async function generateMetadata({
-  params,
+	params,
 }: {
-  params: Promise<{ locale: string; policyId: string }>;
+	params: Promise<{ locale: string; policyId: string }>;
 }): Promise<Metadata> {
-  const { locale } = await params;
+	const { locale } = await params;
 
-  setStaticParamsLocale(locale);
-  const t = await getI18n();
+	setStaticParamsLocale(locale);
+	const t = await getI18n();
 
-  return {
-    title: t("sub_pages.policies.policy_details"),
-  };
+	return {
+		title: t("sub_pages.policies.policy_details"),
+	};
 }
 
 const getPolicy = unstable_cache(
-  async (policyId: string, organizationId: string) => {
-    const policy = await db.organizationPolicy.findUnique({
-      where: { id: policyId, organizationId },
-      include: {
-        policy: true,
-      },
-    });
-    return policy;
-  },
-  ["policy-details"],
-  { tags: ["policies", "policy-details"] },
+	async (policyId: string, organizationId: string) => {
+		const policy = await db.organizationPolicy.findUnique({
+			where: { id: policyId, organizationId },
+			include: {
+				policy: true,
+				PolicyComments: true,
+			},
+		});
+		return policy;
+	},
+	["policy-details"],
+	{ tags: ["policies", "policy-details"] },
 );
 
 const getUsers = unstable_cache(
-  async (organizationId: string) => {
-    const users = await db.user.findMany({
-      where: { organizationId: organizationId },
-    });
+	async (organizationId: string) => {
+		const users = await db.user.findMany({
+			where: { organizationId: organizationId },
+		});
 
-    return users;
-  },
-  ["users-cache"],
+		return users;
+	},
+	["users-cache"],
 );

apps/app/src/components/forms/policies/create-policy-comment-form.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { createPolicyCommentAction } from "@/actions/policies/create-policy-comment";
+import { createPolicyCommentSchema } from "@/actions/schema";
+import { useI18n } from "@/locales/client";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@bubba/ui/accordion";
+import { Button } from "@bubba/ui/button";
+import {
+	Form,
+	FormControl,
+	FormField,
+	FormItem,
+	FormMessage,
+} from "@bubba/ui/form";
+import { Textarea } from "@bubba/ui/textarea";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRightIcon } from "lucide-react";
+import { useAction } from "next-safe-action/hooks";
+import { useParams } from "next/navigation";
+import { useQueryState } from "nuqs";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import type { z } from "zod";
+
+export function CreatePolicyCommentForm() {
+	const t = useI18n();
+	const [_, setPolicyCommentSheet] = useQueryState("policy-comment-sheet");
+	const params = useParams<{ policyId: string }>();
+
+	const createPolicyComment = useAction(createPolicyCommentAction, {
+		onSuccess: () => {
+			toast.success(t("common.comments.success"));
+			setPolicyCommentSheet(null);
+		},
+		onError: () => {
+			toast.error(t("common.comments.error"));
+		},
+	});
+
+	const form = useForm<z.infer<typeof createPolicyCommentSchema>>({
+		resolver: zodResolver(createPolicyCommentSchema),
+		defaultValues: {
+			content: "",
+			policyId: params.policyId,
+		},
+	});
+
+	const onSubmit = (data: z.infer<typeof createPolicyCommentSchema>) => {
+		createPolicyComment.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("common.comments.new")}</AccordionTrigger>
+								<AccordionContent>
+									<div className="space-y-4">
+										<FormField
+											control={form.control}
+											name="content"
+											render={({ field }) => (
+												<FormItem>
+													<FormControl>
+														<Textarea
+															{...field}
+															autoFocus
+															className="mt-3"
+															placeholder={t("common.comments.placeholder")}
+															autoCorrect="off"
+														/>
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
+
+					<div className="flex justify-end mt-4">
+						<Button
+							type="submit"
+							variant="action"
+							disabled={createPolicyComment.status === "executing"}
+						>
+							<div className="flex items-center justify-center">
+								{t("common.comments.save")}
+								<ArrowRightIcon className="ml-2 h-4 w-4" />
+							</div>
+						</Button>
+					</div>
+				</div>
+			</form>
+		</Form>
+	);
+}

apps/app/src/components/policies/policy-comments.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { AssignedUser } from "@/components/assigned-user";
+import { PolicyCommentSheet } from "@/components/sheets/policy-comment-sheet";
+import { useI18n } from "@/locales/client";
+import type { OrganizationPolicy, User } from "@bubba/db";
+import { Button } from "@bubba/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card";
+import { EmptyCard } from "@bubba/ui/empty-card";
+import { format } from "date-fns";
+import { MessageSquare } from "lucide-react";
+import { useQueryState } from "nuqs";
+import React from "react";
+
+export function PolicyComment({
+	policy,
+	users,
+}: {
+	policy: OrganizationPolicy & { PolicyComments: any[] };
+	users: User[];
+}) {
+	const [_, setOpen] = useQueryState("policy-comment-sheet");
+	const t = useI18n();
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>
+					<div className="flex items-center justify-between gap-2">
+						{t("common.comments.title")}
+						<Button variant="action" onClick={() => setOpen("true")}>
+							<MessageSquare className="h-4 w-4" />
+							{t("common.comments.add")}
+						</Button>
+					</div>
+				</CardTitle>
+			</CardHeader>
+			<CardContent>
+				{policy.PolicyComments.length > 0 ? (
+					<div className="flex flex-col gap-2">
+						{policy.PolicyComments.map((comment) => (
+							<div key={comment.id} className="flex flex-col gap-2 border p-4">
+								<div className="flex items-center gap-2">{comment.content}</div>
+								<div className="flex items-center gap-2">
+									<div className="flex items-center gap-2">
+										<AssignedUser
+											fullName={
+												users.find((user) => user.id === comment.ownerId)?.name
+											}
+											avatarUrl={
+												users.find((user) => user.id === comment.ownerId)?.image
+											}
+										/>
+										<span className="text-sm text-muted-foreground">
+											({format(comment.createdAt, "MMM d, yyyy")})
+										</span>
+									</div>
+								</div>
+							</div>
+						))}
+					</div>
+				) : (
+					<EmptyCard
+						title={t("common.comments.empty.title")}
+						icon={MessageSquare}
+						description={t("common.comments.empty.description")}
+						className="w-full"
+					/>
+				)}
+			</CardContent>
+
+			<PolicyCommentSheet policy={policy} />
+		</Card>
+	);
+}