1+ 'use client'
2+
3+ import { useState } from 'react' ;
4+ import { useRouter } from 'next/navigation' ;
5+ // import { db } from "@comp/db";
6+ import PageLayout from "@/app/components/PageLayout" ;
7+ import { DataTable } from "@/app/components/DataTable" ;
8+ import { columns } from "./components/columns" ;
9+ import { CreateFrameworkDialog } from './components/CreateFrameworkDialog' ;
10+ import type { FrameworkEditorFramework } from '@prisma/client' ;
11+
12+ export interface FrameworkWithCounts extends Omit < FrameworkEditorFramework , 'requirements' > {
13+ requirementsCount : number ;
14+ controlsCount : number ;
15+ }
16+
17+ interface FrameworksClientPageProps {
18+ initialFrameworks : FrameworkWithCounts [ ] ;
19+ }
20+
21+ export function FrameworksClientPage ( { initialFrameworks } : FrameworksClientPageProps ) {
22+ const [ isCreateDialogOpen , setIsCreateDialogOpen ] = useState ( false ) ;
23+ const router = useRouter ( ) ;
24+
25+ const handleRowClick = ( framework : FrameworkWithCounts ) => {
26+ router . push ( `/frameworks/${ framework . id } ` ) ;
27+ } ;
28+
29+ return (
30+ < PageLayout breadcrumbs = { [ { label : "Frameworks" , href : "/frameworks" } ] } >
31+ < DataTable
32+ data = { initialFrameworks }
33+ columns = { columns }
34+ searchQueryParamName = "frameworks-search"
35+ searchPlaceholder = "Search frameworks..."
36+ onCreateClick = { ( ) => setIsCreateDialogOpen ( true ) }
37+ createButtonLabel = "Create New Framework"
38+ onRowClick = { handleRowClick }
39+ />
40+ < CreateFrameworkDialog
41+ isOpen = { isCreateDialogOpen }
42+ onOpenChange = { setIsCreateDialogOpen }
43+ onFrameworkCreated = { ( ) => setIsCreateDialogOpen ( false ) }
44+ />
45+ </ PageLayout >
46+ ) ;
47+ }
0 commit comments