Merge pull request #598 from trycompai/main

[comp] Production Deploy

Author: claudfuen

apps/framework-editor/app/(pages)/policies/PoliciesClientPage.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { FrameworkEditorPolicyTemplate } from '@prisma/client';
+import PageLayout from "@/app/components/PageLayout";
+import { DataTable } from "@/app/components/DataTable";
+import { columns } from "./components/columns"; 
+import { CreatePolicyDialog } from "./components/CreatePolicyDialog";
+
+interface PoliciesClientPageProps {
+  initialPolicies: FrameworkEditorPolicyTemplate[];
+}
+
+export function PoliciesClientPage({ initialPolicies }: PoliciesClientPageProps) {
+    const [isCreatePolicyDialogOpen, setIsCreatePolicyDialogOpen] = useState(false);
+    const router = useRouter();
+
+    const handleRowClick = (policy: FrameworkEditorPolicyTemplate) => {
+        router.push(`/policies/${policy.id}`);
+    };
+
+    return (
+        <PageLayout 
+            breadcrumbs={[{ label: "Policies", href: "/policies" }]} 
+        >
+            <DataTable 
+              data={initialPolicies}
+              columns={columns}
+              searchQueryParamName="policies-search" 
+              createButtonLabel="Create Policy"
+              onCreateClick={() => setIsCreatePolicyDialogOpen(true)}
+              onRowClick={handleRowClick}
+            />
+            <CreatePolicyDialog 
+                isOpen={isCreatePolicyDialogOpen}
+                onOpenChange={setIsCreatePolicyDialogOpen}
+            />
+        </PageLayout>
+    );
+} 

apps/framework-editor/app/(pages)/policies/[policyId]/PolicyDetailsClientPage.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@comp/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@comp/ui/card";
+import { PencilIcon, Trash2 } from 'lucide-react';
+import type { FrameworkEditorPolicyTemplate } from '@prisma/client'; // Assuming this is the correct type
+
+// Import the actual dialog components
+import { EditPolicyDialog } from './components/EditPolicyDialog'; 
+import { DeletePolicyDialog } from './components/DeletePolicyDialog';
+
+interface PolicyDetailsClientPageProps {
+  policy: FrameworkEditorPolicyTemplate; // Use the specific Prisma type
+}
+
+export function PolicyDetailsClientPage({ policy }: PolicyDetailsClientPageProps) {
+    const router = useRouter();
+    const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+    const handlePolicyUpdated = () => {
+        setIsEditDialogOpen(false);
+        router.refresh();
+    };
+
+    const handlePolicyDeleted = () => {
+        setIsDeleteDialogOpen(false);
+        router.push('/policies'); // Navigate back to policies list
+    };
+
+    return (
+        <>
+            <Card className="w-full shadow-none rounded-sm">
+                <CardHeader className="pb-2">
+                    <div className="flex justify-between items-start">
+                        <div>
+                            <CardTitle className="text-2xl font-bold flex items-center gap-2">
+                                {policy.name}
+                            </CardTitle>
+                            {policy.description && (
+                                <CardDescription className="mt-2 text-base">
+                                    {policy.description}
+                                </CardDescription>
+                            )}
+                        </div>
+                        <div className="flex gap-2">
+                            <Button variant="outline" size="sm" onClick={() => setIsEditDialogOpen(true)} className="gap-1 rounded-sm">
+                                <PencilIcon className="h-4 w-4" />
+                                Edit Details
+                            </Button>
+                            <Button variant="destructive" size="sm" onClick={() => setIsDeleteDialogOpen(true)} className="gap-1 rounded-sm">
+                                <Trash2 className="h-4 w-4" />
+                                Delete Policy
+                            </Button>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className="space-y-2">
+                        <p><strong>Frequency:</strong> {policy.frequency || 'N/A'}</p>
+                        <p><strong>Department:</strong> {policy.department || 'N/A'}</p>
+                        {/* <p><strong>ID:</strong> {policy.id}</p> */}
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Render Edit Dialog */}
+            {isEditDialogOpen && (
+                <EditPolicyDialog
+                    policy={policy}
+                    isOpen={isEditDialogOpen}
+                    onClose={() => setIsEditDialogOpen(false)}
+                    onPolicyUpdated={handlePolicyUpdated}
+                />
+            )}
+
+            {/* Render Delete Dialog */}
+            {isDeleteDialogOpen && (
+                <DeletePolicyDialog
+                    policyId={policy.id}
+                    policyName={policy.name}
+                    isOpen={isDeleteDialogOpen}
+                    onClose={() => setIsDeleteDialogOpen(false)}
+                    onPolicyDeleted={handlePolicyDeleted}
+                />
+            )}
+        </>
+    );
+} 

apps/framework-editor/app/(pages)/policies/[policyId]/PolicyEditorClient.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { PolicyEditor } from "@/app/components/editor/PolicyEditor"; // Use PolicyEditor from framework-editor
+import type { JSONContent } from "@tiptap/react"; // Or from 'novel'
+import { updatePolicyContent } from "./actions"; // Local server action
+import { toast } from "sonner";
+import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
+
+interface PolicyEditorClientProps {
+	policyId: string;
+	policyName: string; // For display purposes
+	initialContent: JSONContent | JSONContent[] | null | undefined; // From DB
+}
+
+export function PolicyEditorClient({
+	policyId,
+	policyName,
+	initialContent,
+}: PolicyEditorClientProps) {
+
+	const handleSavePolicy = async (contentToSave: JSONContent): Promise<void> => {
+		if (!policyId) return;
+
+		// Ensure the content is strictly JSON-serializable before sending to server action
+		const serializableContent = JSON.parse(JSON.stringify(contentToSave));
+
+		try {
+			// Pass the cleaned-up object to the server action
+			const result = await updatePolicyContent({ policyId, content: serializableContent });
+			if (result.success) {
+				toast.success("Policy content saved!");
+			} else {
+				toast.error(result.message || "Failed to save policy content.");
+			}
+		} catch (error) {
+			console.error("Error saving policy content:", error);
+			toast.error("An unexpected error occurred while saving.");
+			// Re-throw if AdvancedEditor needs to handle it for save status
+			throw error; 
+		}
+	};
+
+	return (
+		<PolicyEditor
+			initialDbContent={initialContent}
+			onSave={handleSavePolicy}
+		/>
+	);
+} 

apps/framework-editor/app/(pages)/policies/[policyId]/actions.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import { db } from '@comp/db';
+import type { JSONContent } from '@tiptap/react'; // Or from 'novel' if it exports it
+import { revalidatePath } from 'next/cache';
+
+interface UpdatePolicyContentArgs {
+  policyId: string;
+  content: JSONContent | JSONContent[]; // Expecting the full Tiptap object now
+}
+
+export async function updatePolicyContent({ policyId, content }: UpdatePolicyContentArgs): Promise<{ success: boolean; message?: string }> {
+  if (!policyId) {
+    return { success: false, message: 'Policy ID is required.' };
+  }
+
+  // Ensure we received the full Tiptap document object and extract the content array
+  let contentToSave: JSONContent[];
+  if (
+    typeof content === 'object' &&
+    content !== null &&
+    !Array.isArray(content) && // Ensure it's not already just an array
+    content.type === 'doc' &&
+    Array.isArray(content.content)
+  ) {
+    contentToSave = content.content;
+  } else {
+    // Handle cases where content is not the expected format
+    console.error("Invalid content format received by updatePolicyContent:", content);
+    return { success: false, message: 'Invalid content format received.' };
+  }
+
+  try {
+    await db.frameworkEditorPolicyTemplate.update({
+      where: { id: policyId },
+      data: {
+        content: contentToSave, // Save only the extracted array
+      },
+    });
+
+    revalidatePath(`/policies/${policyId}`); // Revalidate the detail page
+    return { success: true };
+
+  } catch (error) {
+    console.error("Error updating policy content:", error);
+    return { success: false, message: 'Failed to update policy content.' };
+  }
+} 

apps/framework-editor/app/(pages)/policies/[policyId]/components/DeletePolicyDialog.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { toast } from 'sonner';
+import { deletePolicyTemplate } from '../../actions'; // Path to server actions
+import { Button } from '@comp/ui/button';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@comp/ui/alert-dialog';
+
+interface DeletePolicyDialogProps {
+    policyId: string;
+    policyName: string;
+    isOpen: boolean;
+    onClose: () => void;
+    onPolicyDeleted: () => void; // Callback after successful deletion
+}
+
+export function DeletePolicyDialog({ policyId, policyName, isOpen, onClose, onPolicyDeleted }: DeletePolicyDialogProps) {
+    const [isPending, startTransition] = useTransition();
+
+    const handleDelete = () => {
+        startTransition(async () => {
+            try {
+                const result = await deletePolicyTemplate(policyId);
+                if (result.success) {
+                    toast.success(result.message || 'Policy deleted successfully!');
+                    onPolicyDeleted(); // Trigger navigation or refresh
+                    onClose(); // Close the dialog
+                } else {
+                    toast.error(result.message || 'Failed to delete policy.');
+                }
+            } catch (error) {
+                toast.error('An unexpected error occurred.');
+                console.error("Delete error:", error);
+            }
+        });
+    };
+
+    return (
+        <AlertDialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+            <AlertDialogContent className="rounded-sm">
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        This action cannot be undone. This will permanently delete the policy template 
+                        <span className="font-semibold">{policyName}</span>.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel onClick={onClose} className="rounded-sm">Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={handleDelete}
+                        disabled={isPending}
+                        className="rounded-sm bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                    >
+                        {isPending ? 'Deleting...' : 'Delete Policy'}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}