Merge pull request #601 from trycompai/main

[comp] Production Deploy

Author: Marfuen

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

@@ -13,58 +13,54 @@ import { useQueryState } from "nuqs";
 import { useMemo } from "react";
 import { columns as getColumns } from "./components/table/RiskColumns";
 
-// Define the expected structure of a risk with User as assignee
 export type RiskRow = Risk & { assignee: User | null };
 
 export const RisksTable = ({
 	risks,
 	assignees,
+	pageCount,
 }: {
 	risks: RiskRow[];
 	assignees: (Member & { user: User })[];
+	pageCount: number;
 }) => {
 	const t = useI18n();
 	const session = useSession();
 	const orgId = session?.data?.session?.activeOrganizationId;
-	const [_, setOpen] = useQueryState("create-risk-sheet");
+	const [_, setOpenSheet] = useQueryState("create-risk-sheet");
 
-	// Define columns for risks table
-	const columns = useMemo<ColumnDef<RiskRow>[]>(
-		() => getColumns(orgId ?? ""),
-		[orgId],
-	);
+	const columns = useMemo<ColumnDef<RiskRow>[]>(() => getColumns(orgId ?? ""), [orgId]);
 
-	// Set up the risks table
-	const table = useDataTable({
+	const { table } = useDataTable({
 		data: risks,
 		columns,
-		pageCount: Math.ceil(risks.length / 10),
+		pageCount,
 		getRowId: (row) => row.id,
 		initialState: {
 			pagination: {
 				pageSize: 10,
 				pageIndex: 0,
 			},
+			sorting: [{ id: "title", desc: true }],
+            columnPinning: { right: ["actions"] },
 		},
-	});
-
-	const [searchTerm, setSearchTerm] = useQueryState("search", {
-		defaultValue: "",
+		shallow: false,
+		clearOnDefault: true,
 	});
 
 	return (
 		<>
 			<DataTable
-				table={table.table}
+				table={table}
 				getRowId={(row) => row.id}
 				rowClickBasePath={`/${orgId}/risk`}
 			>
 				<DataTableToolbar
+					table={table}
 					sheet="create-risk-sheet"
 					action="Create Risk"
-					table={table.table}
 				>
-					<DataTableSortList table={table.table} align="end" />
+					<DataTableSortList table={table} align="end" />
 				</DataTableToolbar>
 			</DataTable>
 			<CreateRiskSheet assignees={assignees} />

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

@@ -1,74 +1,86 @@
-"use server";
+import "server-only";
 
 import { auth } from "@/utils/auth";
 import { db } from "@comp/db";
-import { type Departments, Prisma, type RiskStatus } from "@comp/db/types";
+import { Prisma, type User } from "@comp/db/types";
 import { headers } from "next/headers";
+import type { GetRiskSchema } from "./validations";
 
-export async function getRisks({
-	search,
-	page,
-	pageSize,
-	status,
-	department,
-	assigneeId,
-}: {
-	search?: string;
-	page?: number;
-	pageSize?: number;
-	status?: RiskStatus | null;
-	department?: Departments | null;
-	assigneeId?: string | null;
-}) {
+export async function getRisks(input: GetRiskSchema): Promise<{
+	data: (Omit<
+		Prisma.RiskGetPayload<{
+			include: { assignee: { include: { user: true } } };
+		}>,
+		"assignee"
+	> & { assignee: User | null })[];
+	pageCount: number;
+}> {
 	const session = await auth.api.getSession({
 		headers: await headers(),
 	});
 
-	if (!session || !session.session.activeOrganizationId) {
-		return {
-			success: false,
-			error: "Unauthorized",
-		};
+	if (!session?.session.activeOrganizationId) {
+		// In case of unauthorized or missing org, return empty data and 0 pageCount
+		return { data: [], pageCount: 0 };
 	}
 
-	const where = {
+	const { title, page, perPage, sort, filters, joinOperator } = input;
+
+	const orderBy = sort.map((s) => ({
+		[s.id]: s.desc ? "desc" : "asc",
+	}));
+
+	const filterConditions: Prisma.RiskWhereInput[] = filters.map((filter) => {
+		// Basic handling, assuming 'eq' or 'in' based on value type for now
+		// This might need to be more sophisticated based on actual filter operators
+		const value = Array.isArray(filter.value)
+			? { in: filter.value }
+			: filter.value;
+		return { [filter.id]: value };
+	});
+
+	const where: Prisma.RiskWhereInput = {
 		organizationId: session.session.activeOrganizationId,
-		...(search && {
+		...(title && {
 			title: {
-				contains: search,
+				contains: title,
 				mode: Prisma.QueryMode.insensitive,
 			},
 		}),
-		...(status ? { status } : {}),
-		...(department ? { department } : {}),
-		...(assigneeId ? { assigneeId } : {}),
+		...(filterConditions.length > 0 && {
+			[joinOperator.toUpperCase()]: filterConditions,
+		}),
 	};
 
-	const skip = ((page ?? 1) - 1) * (pageSize ?? 10);
+	const skip = (page - 1) * perPage;
+	const take = perPage;
 
-	const risks = await db.risk.findMany({
+	const risksData = await db.risk.findMany({
 		where,
 		skip,
-		take: pageSize,
+		take,
 		include: {
 			assignee: {
 				include: {
 					user: true,
 				},
 			},
 		},
-		orderBy: {
-			createdAt: "desc",
-		},
+		orderBy: orderBy.length > 0 ? orderBy : [{ createdAt: "desc" }],
 	});
 
-	// Transform the data to match the expected structure by RiskRegisterTable
-	const transformedRisks = risks.map((risk) => ({
+	const totalRisks = await db.risk.count({ where });
+
+	const pageCount = Math.ceil(totalRisks / perPage);
+
+	// Transform the data to match the expected structure (assignee as User | null)
+	const transformedRisks = risksData.map((risk) => ({
 		...risk,
 		assignee: risk.assignee ? risk.assignee.user : null,
 	}));
 
 	return {
-		risks: transformedRisks,
+		data: transformedRisks,
+		pageCount,
 	};
 }

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

@@ -0,0 +1,25 @@
+import { getFiltersStateParser, getSortingStateParser } from "@/lib/parsers";
+import { Risk } from "@comp/db/types";
+import {
+	createSearchParamsCache,
+	parseAsArrayOf,
+	parseAsInteger,
+	parseAsString,
+	parseAsStringEnum,
+} from "nuqs/server";
+import * as z from "zod";
+
+export const searchParamsCache = createSearchParamsCache({
+	page: parseAsInteger.withDefault(1),
+	perPage: parseAsInteger.withDefault(10),
+	sort: getSortingStateParser<Risk>().withDefault([
+		{ id: "title", desc: true },
+	]),
+	title: parseAsString.withDefault(""),
+	lastUpdated: parseAsArrayOf(z.coerce.date()).withDefault([]),
+	// advanced filter
+	filters: getFiltersStateParser().withDefault([]),
+	joinOperator: parseAsStringEnum(["and", "or"]).withDefault("and"),
+});
+
+export type GetRiskSchema = Awaited<ReturnType<typeof searchParamsCache.parse>>;

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

@@ -11,47 +11,43 @@ import { headers } from "next/headers";
 import { cache } from "react";
 import { RisksTable } from "./RisksTable";
 import { getRisks } from "./data/getRisks";
+import { searchParamsCache } from "./data/validations";
+import { getValidFilters } from "@/lib/data-table";
 
-export default async function RiskRegisterPage({
-	params,
-}: {
-	params: Promise<{
-		orgId: string;
-		locale: string;
+export default async function RiskRegisterPage(props: {
+	params: Promise<{ locale: string; orgId: string }>;
+	searchParams: Promise<{
 		search: string;
-		page: number;
-		pageSize: number;
-		status: RiskStatus | null;
-		department: Departments | null;
-		assigneeId: string | null;
+		page: string;
+		perPage: string;
+		status: string;
+		department: string;
+		assigneeId: string;
 	}>;
 }) {
-	const {
-		orgId,
-		locale,
-		search,
-		page,
-		pageSize,
-		status,
-		department,
-		assigneeId,
-	} = await params;
+	const { params } = props;
+	const { orgId, locale } = await params;
+
+	const searchParams = await props.searchParams;
+	const search = searchParamsCache.parse(searchParams);
+	const validFilters = getValidFilters(search.filters);
 
 	setStaticParamsLocale(locale);
 	const t = await getI18n();
 
-	const risks = await getRisks({
-		search: search,
-		page: page || 1,
-		pageSize: pageSize || 10,
-		status: status || null,
-		department: department || null,
-		assigneeId: assigneeId || null,
+	const risksResult = await getRisks({
+		...search,
+		filters: validFilters,
 	});
 
 	const assignees = await getAssignees();
 
-	if (risks.risks?.length === 0) {
+	if (
+		risksResult.data?.length === 0 &&
+		search.page === 1 &&
+		search.title === "" &&
+		validFilters.length === 0
+	) {
 		return (
 			<>
 				<AppOnboarding
@@ -98,9 +94,15 @@ export default async function RiskRegisterPage({
 
 	return (
 		<PageWithBreadcrumb
-			breadcrumbs={[{ label: "Risks", href: `/${orgId}/risk`, current: true }]}
+			breadcrumbs={[
+				{ label: "Risks", href: `/${orgId}/risk`, current: true },
+			]}
 		>
-			<RisksTable risks={risks?.risks || []} assignees={assignees} />
+			<RisksTable
+				risks={risksResult?.data || []}
+				pageCount={risksResult.pageCount}
+				assignees={assignees}
+			/>
 		</PageWithBreadcrumb>
 	);
 }