[comp] Production Deploy

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/[controlId]/components/PoliciesTable.tsx

@@ -124,13 +124,13 @@ export function PoliciesTable({
 						onChange={(e) => setSearchTerm(e.target.value)}
 						className="max-w-sm"
 					/>
-					<div className="ml-auto">
+					{/* <div className="ml-auto">
 						<DataTableSortList
 							table={table.table}
 							align="end"
 							tableId="policiesTable"
 						/>
-					</div>
+					</div> */}
 				</div>
 				<DataTable
 					table={table.table}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/[controlId]/components/RequirementsTable.tsx

@@ -113,6 +113,7 @@ interface RequirementsTableProps {
 			// No default sorting to avoid type issues
 		},
 		tableId: "r",
+		clearOnDefault: true,
 	});
 
 	return (
@@ -133,13 +134,13 @@ interface RequirementsTableProps {
 						onChange={(e) => setSearchTerm(e.target.value)}
 						className="max-w-sm"
 					/>
-					<div className="ml-auto">
+					{/* <div className="ml-auto">
 						<DataTableSortList
 							table={table.table}
 							align="end"
 							tableId="r"
 						/>
-					</div>
+					</div> */}
 				</div>
 				<DataTable
 					table={table.table}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/[controlId]/components/TasksTable.tsx

@@ -130,13 +130,13 @@ export function TasksTable({ tasks, orgId, controlId }: TasksTableProps) {
 						onChange={(e) => setSearchTerm(e.target.value)}
 						className="max-w-sm"
 					/>
-					<div className="ml-auto">
+					{/* <div className="ml-auto">
 						<DataTableSortList
 							table={table.table}
 							align="end"
 							tableId="t"
 						/>
-					</div>
+					</div> */}
 				</div>
 				<DataTable
 					table={table.table}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/components/controls-table-columns.tsx

@@ -30,10 +30,17 @@ export function getControlColumns(): ColumnDef<ControlWithRelations>[] {
 				variant: "text",
 			},
 			enableColumnFilter: true,
+			filterFn: (row, id, value) => {
+				return value.length === 0 
+					? true 
+					: String(row.getValue(id))
+						.toLowerCase()
+						.includes(String(value).toLowerCase());
+			},
 		},
 		{
 			id: "status",
-			accessorKey: "status",
+			accessorKey: "",
 			header: ({ column }) => (
 				<DataTableColumnHeader column={column} title="Status" />
 			),
@@ -46,12 +53,13 @@ export function getControlColumns(): ColumnDef<ControlWithRelations>[] {
 			meta: {
 				label: "Status",
 				placeholder: "Search status...",
-				variant: "select",
+				variant: "text",
 			},
+			enableSorting: false,
 		},
 		{
 			id: "mappedRequirements",
-			accessorKey: "mappedRequirements",
+			accessorKey: "requirementsMapped",
 			header: ({ column }) => (
 				<DataTableColumnHeader
 					column={column}
@@ -72,8 +80,7 @@ export function getControlColumns(): ColumnDef<ControlWithRelations>[] {
 										variant="secondary"
 										className="text-xs"
 									>
-										{frameworkName}:{" "}
-										{req.requirementId}
+										{req.requirement.name}
 									</Badge>
 								);
 							})
@@ -83,11 +90,6 @@ export function getControlColumns(): ColumnDef<ControlWithRelations>[] {
 					</div>
 				);
 			},
-			meta: {
-				label: "Linked Requirements",
-				placeholder: "Search Linked Requirements...",
-				variant: "text",
-			},
 		},
 	];
 }

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/components/controls-table.tsx

@@ -19,16 +19,17 @@ export function ControlsTable({ promises }: ControlsTableProps) {
 	const [{ data, pageCount }] = React.use(promises);
 	const { orgId } = useParams();
 	const columns = React.useMemo(() => getControlColumns(), []);
+	const [filteredData, setFilteredData] = React.useState<ControlWithRelations[]>(data);
 
+	// For client-side filtering, we don't need to apply server-side filtering
 	const { table } = useDataTable({
-		data,
+		data: filteredData,
 		columns,
 		pageCount,
 		initialState: {
 			sorting: [{ id: "name", desc: true }],
-			columnPinning: { right: ["actions"] },
 		},
-		getRowId: (originalRow: ControlWithRelations) => originalRow.id,
+		getRowId: (row) => row.id,
 		shallow: false,
 		clearOnDefault: true,
 	});
@@ -41,7 +42,7 @@ export function ControlsTable({ promises }: ControlsTableProps) {
 				rowClickBasePath={`/${orgId}/controls`}
 			>
 				<DataTableToolbar table={table}>
-					<DataTableSortList table={table} align="end" />
+					{/* <DataTableSortList table={table} align="end" /> */}
 				</DataTableToolbar>
 			</DataTable>
 			<CreatePolicySheet />

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/data/queries.ts

@@ -22,6 +22,12 @@ const controlInclude = {
 					framework: true,
 				},
 			},
+			requirement: {
+				select: {
+					name: true,
+					identifier: true,
+				},
+			},
 		},
 	},
 } satisfies Prisma.ControlInclude;

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/controls/data/validations.ts

@@ -11,7 +11,7 @@ import * as z from "zod";
 
 export const searchParamsCache = createSearchParamsCache({
 	page: parseAsInteger.withDefault(1),
-	perPage: parseAsInteger.withDefault(10),
+	perPage: parseAsInteger.withDefault(50),
 	sort: getSortingStateParser<Control>().withDefault([
 		{ id: "name", desc: true },
 	]),

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/[frameworkInstanceId]/components/FrameworkRequirements.tsx

@@ -2,16 +2,15 @@
 
 import { DataTable } from "@/components/data-table/data-table";
 import { DataTableColumnHeader } from "@/components/data-table/data-table-column-header";
-import { DataTableSortList } from "@/components/data-table/data-table-sort-list";
+import { DataTableToolbar } from "@/components/data-table/data-table-toolbar";
 import { useDataTable } from "@/hooks/use-data-table";
 import { useI18n } from "@/locales/client";
+import type { FrameworkEditorRequirement } from "@comp/db/types";
 import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
-import { Input } from "@comp/ui/input";
 import { ColumnDef } from "@tanstack/react-table";
 import { useParams } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { FrameworkInstanceWithControls } from "../../types";
-import type { FrameworkEditorRequirement } from "@comp/db/types";
 
 interface RequirementItem extends FrameworkEditorRequirement {
 	mappedControlsCount: number;
@@ -29,7 +28,6 @@ export function FrameworkRequirements({
 		orgId: string;
 		frameworkInstanceId: string;
 	}>();
-	const [searchTerm, setSearchTerm] = useState("");
 
 	const items = useMemo(() => {
 		return requirementDefinitions.map((def) => {
@@ -60,7 +58,12 @@ export function FrameworkRequirements({
 				size: 200,
 				minSize: 150,
 				maxSize: 250,
-				enableResizing: true,
+				meta: {
+					label: "Requirement Name",
+					placeholder: "Search...",
+					variant: "text",
+				},
+				enableColumnFilter: true,
 			},
 			{
 				accessorKey: "description",
@@ -104,22 +107,8 @@ export function FrameworkRequirements({
 		[t],
 	);
 
-	const filteredRequirements = useMemo(() => {
-		if (!items?.length) return [];
-		if (!searchTerm.trim()) return items;
-
-		const searchLower = searchTerm.toLowerCase();
-		return items.filter(
-			(requirement) =>
-				(requirement.id?.toLowerCase() || "").includes(searchLower) ||
-				(requirement.name?.toLowerCase() || "").includes(searchLower) ||
-				(requirement.description?.toLowerCase() || "").includes(searchLower) ||
-				(requirement.identifier?.toLowerCase() || "").includes(searchLower)
-		);
-	}, [items, searchTerm]);
-
 	const table = useDataTable({
-		data: filteredRequirements,
+		data: items,
 		columns,
 		pageCount: 1,
 		shallow: false,
@@ -129,6 +118,7 @@ export function FrameworkRequirements({
 		},
 	});
 
+
 	if (!items?.length) {
 		return null;
 	}
@@ -138,28 +128,19 @@ export function FrameworkRequirements({
 			<CardHeader>
 				<CardTitle>
 					{t("frameworks.requirements.requirements")} (
-					{filteredRequirements.length})
+					{table.table.getFilteredRowModel().rows.length})
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				<div className="flex items-center mb-4">
-					<Input
-						placeholder={t(
-							"frameworks.requirements.search.universal_placeholder",
-						)}
-						value={searchTerm}
-						onChange={(e) => setSearchTerm(e.target.value)}
-						className="max-w-sm"
-					/>
-					<div className="ml-auto">
-						<DataTableSortList table={table.table} align="end" />
-					</div>
-				</div>
 				<DataTable
 					table={table.table}
 					rowClickBasePath={`/${orgId}/frameworks/${frameworkInstanceId}/requirements/`}
 					getRowId={(row) => row.id}
-				/>
+				>
+					<DataTableToolbar table={table.table}>
+						{/* <DataTableSortList table={table.table} align="end" /> */}
+					</DataTableToolbar>
+				</DataTable>
 			</CardContent>
 		</Card>
 	);

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/[frameworkInstanceId]/requirements/[requirementKey]/components/table/RequirementControlsTable.tsx

@@ -100,9 +100,9 @@ export function RequirementControlsTable({
 					onChange={(e) => setSearchTerm(e.target.value)}
 					className="max-w-sm"
 				/>
-				<div className="ml-auto">
+				{/* <div className="ml-auto">
 					<DataTableSortList table={table.table} />
-				</div>
+				</div> */}
 			</div>
 			<DataTable
 				table={table.table}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/all/components/policies-table.tsx

@@ -46,7 +46,7 @@ export function PoliciesTable({ promises }: PoliciesTableProps) {
 					sheet="create-policy-sheet"
 					action="Create Policy"
 				>
-					<DataTableSortList table={table} align="end" />
+					{/* <DataTableSortList table={table} align="end" /> */}
 				</DataTableToolbar>
 			</DataTable>
 			<CreatePolicySheet />

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/policies/all/data/validations.ts

@@ -11,7 +11,7 @@ import * as z from "zod";
 
 export const searchParamsCache = createSearchParamsCache({
 	page: parseAsInteger.withDefault(1),
-	perPage: parseAsInteger.withDefault(10),
+	perPage: parseAsInteger.withDefault(50),
 	sort: getSortingStateParser<Policy>().withDefault([
 		{ id: "name", desc: false },
 	]),

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/RisksTable.tsx

@@ -38,7 +38,7 @@ export const RisksTable = ({
 		getRowId: (row) => row.id,
 		initialState: {
 			pagination: {
-				pageSize: 10,
+				pageSize: 50,
 				pageIndex: 0,
 			},
 			sorting: [{ id: "title", desc: true }],

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/components/table/RiskColumns.tsx

@@ -65,10 +65,11 @@ export const columns = (orgId: string): ColumnDef<RiskRow>[] => [
 	},
 	{
 		id: "assignee",
-		accessorKey: "assignee",
+		accessorKey: "assignee.name",
 		header: ({ column }) => (
 			<DataTableColumnHeader column={column} title="Assignee" />
 		),
+		enableSorting: false,
 		cell: ({ row }) => {
 			if (!row.original.assignee) {
 				return (

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/risk/(overview)/data/validations.ts

@@ -11,7 +11,7 @@ import * as z from "zod";
 
 export const searchParamsCache = createSearchParamsCache({
 	page: parseAsInteger.withDefault(1),
-	perPage: parseAsInteger.withDefault(10),
+	perPage: parseAsInteger.withDefault(50),
 	sort: getSortingStateParser<Risk>().withDefault([
 		{ id: "title", desc: true },
 	]),

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorColumns.tsx

@@ -74,6 +74,7 @@ export const columns: ColumnDef<VendorRow>[] = [
 		header: ({ column }) => {
 			return <DataTableColumnHeader column={column} title="Assignee" />;
 		},
+		enableSorting: false,
 		cell: ({ row }) => {
 			// Handle null assignee
 			if (!row.original.assignee) {

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/components/VendorsTable.tsx

@@ -33,10 +33,10 @@ export function VendorsTable({ promises }: VendorsTableProps) {
 		getRowId: (row) => row.id,
 		initialState: {
 			pagination: {
-				pageIndex: 0, // Corresponds to page=1 in URL
-				pageSize: 10, // Corresponds to perPage=10 in URL, aligns with validations.ts default
+				pageIndex: 0,
+				pageSize: 50,
 			},
-			sorting: [{ id: "name", desc: true }], // Align with 'name' search param
+			sorting: [{ id: "name", desc: true }],
 		},
 		shallow: false,
 		clearOnDefault: true,
@@ -54,7 +54,7 @@ export function VendorsTable({ promises }: VendorsTableProps) {
 					sheet="createVendorSheet"
 					action="Add Vendor"
 				>
-					<DataTableSortList table={table} align="end" />
+					{/* <DataTableSortList table={table} align="end" /> */}
 				</DataTableToolbar>
 			</DataTable>
 			<CreateVendorSheet assignees={assignees} />

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/vendors/(overview)/data/validations.ts

@@ -11,7 +11,7 @@ import * as z from "zod";
 
 export const vendorsSearchParamsCache = createSearchParamsCache({
 	page: parseAsInteger.withDefault(1),
-	perPage: parseAsInteger.withDefault(10),
+	perPage: parseAsInteger.withDefault(50),
 	sort: getSortingStateParser<Vendor>().withDefault([
 		{ id: "name", desc: false }, // Default sort by name ascending
 	]),