Merge pull request #540 from trycompai/claudio/comp-118-create-data-package-management-tool

[dev] [claudfuen] claudio/comp-118-create-data-package-management-tool

Author: claudfuen

.cursorrules

@@ -19,8 +19,8 @@
 		"@ai-sdk/openai": "^1.3.19",
 		"@ai-sdk/provider": "^1.1.3",
 		"@ai-sdk/react": "^1.2.9",
-		"@aws-sdk/client-s3": "^3.796.0",
-		"@aws-sdk/s3-request-presigner": "^3.800.0",
+		"@aws-sdk/client-s3": "^3.806.0",
+		"@aws-sdk/s3-request-presigner": "^3.806.0",
 		"@browserbasehq/sdk": "^2.5.0",
 		"@comp/data": "workspace:*",
 		"@comp/db": "workspace:*",
@@ -82,7 +82,6 @@
 		"puppeteer-core": "^24.7.2",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
-		"react-hook-form": "^7.56.1",
 		"react-hotkeys-hook": "^4.6.2",
 		"react-intersection-observer": "^9.16.0",
 		"react-markdown": "^9.1.0",
@@ -122,5 +121,10 @@
 	},
 	"exports": {
 		"./src/lib/encryption": "./src/lib/encryption.ts"
+	},
+	"peerDependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0",
+		"react-hook-form": "^7.56.3"
 	}
 }

apps/app/package.json

@@ -1,7 +1,8 @@
 import "@/styles/globals.css";
+import "@comp/ui/globals.css";
+
 import { auth } from "@/utils/auth";
 import { cn } from "@comp/ui/cn";
-import "@comp/ui/globals.css";
 import { GeistMono } from "geist/font/mono";
 import type { Metadata } from "next";
 import localFont from "next/font/local";

apps/app/src/app/[locale]/layout.tsx

@@ -0,0 +1 @@
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/comp?schema=public"

apps/framework-editor/.env.example

@@ -0,0 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/framework-editor/.gitignore

@@ -0,0 +1,44 @@
+'use client';
+
+import type { ColumnDef } from '@tanstack/react-table';
+import Link from 'next/link';
+import type { FrameworkEditorControlTemplate } from '@prisma/client';
+
+export const columns: ColumnDef<FrameworkEditorControlTemplate>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    size: 350,
+    cell: ({ row }) => {
+      const control = row.original;
+      return (
+        <Link href={`/controls/${control.id}`} className="hover:underline">
+          {control.name}
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: 'description',
+    header: 'Description',
+    size: 700,
+    minSize: 400,
+    cell: ({ row }) => {
+      const description = row.getValue('description') as string;
+      return (
+        <div style={{ wordBreak: 'break-word' }}>
+          {description}
+        </div>
+      );
+    },
+  },
+  // TODO: Add columns for policyTemplates, requirements, taskTemplates if needed
+  // This might involve custom cell renderers to display counts or summaries.
+  // Example for displaying count of policy templates:
+  // {
+  //   id: 'policyTemplatesCount',
+  //   header: 'Policy Templates',
+  //   accessorFn: row => row.policyTemplates?.length || 0,
+  //   cell: ({ getValue }) => `${getValue()} policies`
+  // },
+]; 

apps/framework-editor/app/(pages)/controls/components/columns.tsx

@@ -0,0 +1,27 @@
+import { db } from "@comp/db";
+import PageLayout from "@/app/components/PageLayout";
+// import { ControlsTable } from "./components/ControlsTable"; // Old import
+import { DataTable } from "@/app/components/DataTable"; // New generic table
+import { columns } from "./components/columns"; // Import the new columns
+
+export default async function Page() {
+    const controls = await db.frameworkEditorControlTemplate.findMany({
+      // Optionally include related data if you plan to display it and it's not too large
+      // include: {
+      //   policyTemplates: true,
+      //   requirements: true,
+      //   taskTemplates: true,
+      // }
+    });
+
+    return (
+        <PageLayout breadcrumbs={[{ label: "Controls", href: "/controls" }]}>
+            {/* <ControlsTable controls={controls} /> */}
+            <DataTable 
+              data={controls} 
+              columns={columns} // Pass the columns
+              searchQueryParamName="controls-search" 
+            />
+        </PageLayout>
+    );
+}

apps/framework-editor/app/(pages)/controls/page.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+// import { db } from "@comp/db";
+import PageLayout from "@/app/components/PageLayout";
+import { DataTable } from "@/app/components/DataTable";
+import { columns } from "./components/columns"; 
+import { CreateFrameworkDialog } from './components/CreateFrameworkDialog';
+import type { FrameworkEditorFramework } from '@prisma/client';
+
+export interface FrameworkWithCounts extends Omit<FrameworkEditorFramework, 'requirements'> {
+  requirementsCount: number;
+  controlsCount: number;
+}
+
+interface FrameworksClientPageProps {
+  initialFrameworks: FrameworkWithCounts[];
+}
+
+export function FrameworksClientPage({ initialFrameworks }: FrameworksClientPageProps) {
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const router = useRouter();
+
+    const handleRowClick = (framework: FrameworkWithCounts) => {
+        router.push(`/frameworks/${framework.id}`);
+    };
+
+    return (
+        <PageLayout breadcrumbs={[{ label: "Frameworks", href: "/frameworks" }]}>
+            <DataTable 
+                data={initialFrameworks}
+                columns={columns} 
+                searchQueryParamName="frameworks-search" 
+                searchPlaceholder="Search frameworks..."
+                onCreateClick={() => setIsCreateDialogOpen(true)}
+                createButtonLabel="Create New Framework"
+                onRowClick={handleRowClick}
+            />
+            <CreateFrameworkDialog 
+                isOpen={isCreateDialogOpen} 
+                onOpenChange={setIsCreateDialogOpen} 
+                onFrameworkCreated={() => setIsCreateDialogOpen(false)}
+            />
+        </PageLayout>
+    );
+}