Claudio/fix frameworks and requirements

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

@@ -0,0 +1,34 @@
+import type { FrameworkId, RequirementMap } from "@bubba/db/types";
+import { TableCell, TableRow } from "@bubba/ui/table";
+import { getRequirementDetails } from "../../../frameworks/lib/getRequirementDetails";
+import { useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
+
+interface RequirementRowProps {
+	requirement: RequirementMap;
+}
+
+export function RequirementRow({ requirement }: RequirementRowProps) {
+	const router = useRouter();
+	const params = useParams();
+	const [frameworkId, requirementId] = requirement.requirementId.split("_");
+	const orgId = params.orgId as string;
+
+	const requirementDetails = getRequirementDetails(
+		frameworkId as FrameworkId,
+		requirementId,
+	);
+
+	const href = `/${orgId}/frameworks/${requirement.frameworkInstanceId}/requirements/${requirementId}`;
+
+	return (
+		<TableRow
+			onClick={() => router.push(href)}
+			className="group hover:bg-muted/50 transition-colors cursor-pointer"
+		>
+			<TableCell className="font-medium">{requirementId}</TableCell>
+			<TableCell>{requirementDetails?.name}</TableCell>
+			<TableCell>{requirementDetails?.description}</TableCell>
+		</TableRow>
+	);
+}

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

@@ -15,6 +15,7 @@ import { useMemo } from "react";
 import type { ControlProgressResponse } from "../data/getOrganizationControlProgress";
 import { SingleControlSkeleton } from "./SingleControlSkeleton";
 import { useI18n } from "@/locales/client";
+import { RequirementRow } from "./RequirementRow";
 
 interface SingleControlProps {
 	control: Control & {
@@ -80,17 +81,18 @@ export const SingleControl = ({
 										<TableHead>
 											{t("frameworks.requirements.table.name")}
 										</TableHead>
+										<TableHead>
+											{t("frameworks.requirements.table.description")}
+										</TableHead>
 									</TableRow>
 								</TableHeader>
 								<TableBody>
 									{control.requirementsMapped.length > 0 ? (
 										control.requirementsMapped.map((requirement) => (
-											<TableRow key={requirement.id}>
-												<TableCell className="font-medium">
-													{requirement.requirementId}
-												</TableCell>
-												<TableCell>{requirement.requirementId}</TableCell>
-											</TableRow>
+											<RequirementRow
+												key={requirement.id}
+												requirement={requirement}
+											/>
 										))
 									) : (
 										<TableRow>

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

@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card";
 import { Progress } from "@bubba/ui/progress";
 import { FrameworkInstanceWithControls } from "../../types";
 import { getControlStatus } from "../../lib/utils";
-import { getFrameworkName } from "../../lib/getFrameworkName";
+import { getFrameworkDetails } from "../../lib/getFrameworkDetails";
 interface FrameworkOverviewProps {
 	frameworkInstanceWithControls: FrameworkInstanceWithControls;
 }
@@ -34,7 +34,10 @@ export function FrameworkOverview({
 			<Card>
 				<CardHeader>
 					<CardTitle>
-						{getFrameworkName(frameworkInstanceWithControls.frameworkId)}
+						{
+							getFrameworkDetails(frameworkInstanceWithControls.frameworkId)
+								.name
+						}
 					</CardTitle>
 				</CardHeader>
 				<CardContent>

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

@@ -76,15 +76,15 @@ export function FrameworkRequirements({
 						>
 							<TableCell>
 								<Link
-									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirement/${requirement.id}`}
+									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirements/${requirement.id}`}
 									className="block w-full"
 								>
 									{requirement.id}
 								</Link>
 							</TableCell>
 							<TableCell>
 								<Link
-									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirement/${requirement.id}`}
+									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirements/${requirement.id}`}
 									className="block w-full"
 								>
 									{requirement.name}
@@ -100,7 +100,7 @@ export function FrameworkRequirements({
 							</TableCell>
 							<TableCell>
 								<Link
-									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirement/${requirement.id}`}
+									href={`/${orgId}/frameworks/${frameworkInstanceId}/requirements/${requirement.id}`}
 									className="block w-full text-sm text-muted-foreground"
 								>
 									{requirement.mappedControlsCount}

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

@@ -4,7 +4,8 @@ import { redirect } from "next/navigation";
 import { getSingleFrameworkInstanceWithControls } from "../data/getSingleFrameworkInstanceWithControls";
 import { FrameworkOverview } from "./components/FrameworkOverview";
 import { FrameworkRequirements } from "./components/FrameworkRequirements";
-
+import PageWithBreadcrumb from "../../../../../../../components/pages/PageWithBreadcrumb";
+import { getFrameworkDetails } from "../lib/getFrameworkDetails";
 interface PageProps {
 	params: Promise<{
 		frameworkInstanceId: string;
@@ -38,15 +39,26 @@ export default async function FrameworkPage({ params }: PageProps) {
 		redirect("/");
 	}
 
+	const framework = getFrameworkDetails(
+		frameworkInstanceWithControls.frameworkId,
+	).name;
+
 	return (
-		<div className="flex flex-col gap-6">
-			<FrameworkOverview
-				frameworkInstanceWithControls={frameworkInstanceWithControls}
-			/>
-			<FrameworkRequirements
-				frameworkId={frameworkInstanceWithControls.frameworkId}
-				frameworkInstanceWithControls={frameworkInstanceWithControls}
-			/>
-		</div>
+		<PageWithBreadcrumb
+			breadcrumbs={[
+				{ label: "Frameworks", href: `/${organizationId}/frameworks` },
+				{ label: framework },
+			]}
+		>
+			<div className="flex flex-col gap-6">
+				<FrameworkOverview
+					frameworkInstanceWithControls={frameworkInstanceWithControls}
+				/>
+				<FrameworkRequirements
+					frameworkId={frameworkInstanceWithControls.frameworkId}
+					frameworkInstanceWithControls={frameworkInstanceWithControls}
+				/>
+			</div>
+		</PageWithBreadcrumb>
 	);
 }

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/[frameworkInstanceId]/requirement/[requirementKey]/page.tsx → apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/[frameworkInstanceId]/requirements/[requirementKey]/page.tsx

@@ -4,6 +4,8 @@ import { redirect } from "next/navigation";
 import { getSingleFrameworkInstanceWithControls } from "../../../data/getSingleFrameworkInstanceWithControls";
 import { getFrameworkRequirements } from "../../../lib/getFrameworkRequirements";
 import { RequirementControls } from "./components/RequirementControls";
+import PageWithBreadcrumb from "@/components/pages/PageWithBreadcrumb";
+import { getFrameworkDetails } from "../../../lib/getFrameworkDetails";
 
 interface PageProps {
 	params: Promise<{
@@ -48,13 +50,37 @@ export default async function RequirementPage({ params }: PageProps) {
 		redirect(`/${organizationId}/frameworks/${frameworkInstanceId}`);
 	}
 
+	const frameworkName = getFrameworkDetails(
+		frameworkInstanceWithControls.frameworkId,
+	).name;
+
+	const siblingRequirements = Object.keys(requirements).filter(
+		(req) => req !== requirementKey,
+	);
+
+	const siblingRequirementsDropdown = siblingRequirements.map((req) => ({
+		label: requirements[req as keyof typeof requirements].name,
+		href: `/${organizationId}/frameworks/${frameworkInstanceId}/requirements/${req}`,
+	}));
+
 	return (
-		<div className="flex flex-col gap-6">
-			<RequirementControls
-				requirement={requirement}
-				requirementKey={requirementKey}
-				frameworkInstanceWithControls={frameworkInstanceWithControls}
-			/>
-		</div>
+		<PageWithBreadcrumb
+			breadcrumbs={[
+				{ label: "Frameworks", href: `/${organizationId}/frameworks` },
+				{
+					label: frameworkName,
+					href: `/${organizationId}/frameworks/${frameworkInstanceId}`,
+				},
+				{ label: requirement.name, dropdown: siblingRequirementsDropdown },
+			]}
+		>
+			<div className="flex flex-col gap-6">
+				<RequirementControls
+					requirement={requirement}
+					requirementKey={requirementKey}
+					frameworkInstanceWithControls={frameworkInstanceWithControls}
+				/>
+			</div>
+		</PageWithBreadcrumb>
 	);
 }

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

@@ -7,7 +7,7 @@ import { cn } from "@bubba/ui/cn";
 import { Progress } from "@bubba/ui/progress";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { getFrameworkName } from "../lib/getFrameworkName";
+import { getFrameworkDetails } from "../lib/getFrameworkDetails";
 import { FrameworkInstanceWithControls } from "../types";
 
 interface FrameworkCardProps {
@@ -44,7 +44,7 @@ export function FrameworkCard({
 						<div className="flex-1">
 							<div className="flex items-center justify-between">
 								<h2 className="font-medium text-2xl">
-									{getFrameworkName(frameworkInstance.frameworkId)}
+									{getFrameworkDetails(frameworkInstance.frameworkId).name}
 								</h2>
 								<span
 									className={cn(

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

@@ -1,8 +1,7 @@
 "use client";
 
-import { useI18n } from "@/locales/client";
-import type { FrameworkInstanceWithComplianceScore } from "./types";
 import { FrameworkCard } from "./FrameworkCard";
+import type { FrameworkInstanceWithComplianceScore } from "./types";
 
 export function FrameworkList({
 	frameworksWithControlsAndComplianceScores,

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

@@ -15,14 +15,12 @@ export async function FrameworksOverview({
 		});
 
 	return (
-		<div className="space-y-12">
-			<div className="grid gap-4 md:grid-cols-2 select-none">
-				<FrameworkList
-					frameworksWithControlsAndComplianceScores={
-						frameworksWithControlsAndComplianceScores
-					}
-				/>
-			</div>
+		<div className="grid gap-4 md:grid-cols-2 select-none w-full">
+			<FrameworkList
+				frameworksWithControlsAndComplianceScores={
+					frameworksWithControlsAndComplianceScores
+				}
+			/>
 		</div>
 	);
 }

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/layout.tsx

@@ -1,8 +1,7 @@
-import { auth } from "@bubba/auth";
 import { getI18n } from "@/locales/server";
-import { redirect } from "next/navigation";
-import { SecondaryMenu } from "@bubba/ui/secondary-menu";
+import { auth } from "@bubba/auth";
 import { headers } from "next/headers";
+import { redirect } from "next/navigation";
 
 export default async function Layout({
 	children,
@@ -21,15 +20,6 @@ export default async function Layout({
 
 	return (
 		<div className="max-w-[1200px] mx-auto">
-			<SecondaryMenu
-				items={[
-					{
-						path: `/${session.session.activeOrganizationId}/frameworks`,
-						label: t("frameworks.title"),
-					},
-				]}
-			/>
-
 			<main className="mt-8">{children}</main>
 		</div>
 	);

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/lib/getFrameworkDetails.ts

@@ -0,0 +1,6 @@
+import { frameworks } from "@bubba/data";
+import { FrameworkId } from "@bubba/db/types";
+
+export function getFrameworkDetails(frameworkId: FrameworkId) {
+	return frameworks[frameworkId as keyof typeof frameworks];
+}

apps/app/src/app/[locale]/(app)/(dashboard)/[orgId]/frameworks/lib/getRequirementDetails.ts

@@ -0,0 +1,14 @@
+import { requirements } from "@bubba/data";
+
+export function getRequirementDetails(
+	frameworkId: keyof typeof requirements,
+	requirementId: string,
+) {
+	const frameworkRequirements =
+		requirements[frameworkId as keyof typeof requirements] || [];
+
+	const requirement =
+		frameworkRequirements[requirementId as keyof typeof frameworkRequirements];
+
+	return requirement;
+}

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

@@ -4,6 +4,7 @@ import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 import { FrameworksOverview } from "./components/FrameworksOverview";
 import { getAllFrameworkInstancesWithControls } from "./data/getAllFrameworkInstancesWithControls";
+import PageWithBreadcrumb from "../../../../../../components/pages/PageWithBreadcrumb";
 
 export async function generateMetadata() {
 	const t = await getI18n();
@@ -30,9 +31,8 @@ export default async function DashboardPage() {
 	});
 
 	return (
-		<FrameworksOverview
-			frameworksWithControls={frameworksWithControls}
-			organizationId={organizationId}
-		/>
+		<PageWithBreadcrumb breadcrumbs={[{ label: "Frameworks" }]}>
+			<FrameworksOverview frameworksWithControls={frameworksWithControls} />
+		</PageWithBreadcrumb>
 	);
 }