diff --git a/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts b/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts
new file mode 100644
index 000000000..c6ddb6093
--- /dev/null
+++ b/apps/console/src/__generated__/core/CompliancePageLayoutQuery.graphql.ts
@@ -0,0 +1,164 @@
+/**
+ * @generated SignedSource<<6b8fb96ca82a23677b5a8d4b22b1685f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CompliancePageLayoutQuery$variables = {
+ organizationId: string;
+};
+export type CompliancePageLayoutQuery$data = {
+ readonly organization: {
+ readonly __typename: "Organization";
+ readonly trustCenter: {
+ readonly active: boolean;
+ } | null | undefined;
+ } | {
+ // This will never be '%other', but we need some
+ // value in case none of the concrete values match.
+ readonly __typename: "%other";
+ };
+};
+export type CompliancePageLayoutQuery = {
+ response: CompliancePageLayoutQuery$data;
+ variables: CompliancePageLayoutQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+ {
+ "defaultValue": null,
+ "kind": "LocalArgument",
+ "name": "organizationId"
+ }
+],
+v1 = [
+ {
+ "kind": "Variable",
+ "name": "id",
+ "variableName": "organizationId"
+ }
+],
+v2 = {
+ "alias": null,
+ "args": null,
+ "kind": "ScalarField",
+ "name": "__typename",
+ "storageKey": null
+},
+v3 = {
+ "alias": null,
+ "args": null,
+ "kind": "ScalarField",
+ "name": "active",
+ "storageKey": null
+},
+v4 = {
+ "alias": null,
+ "args": null,
+ "kind": "ScalarField",
+ "name": "id",
+ "storageKey": null
+};
+return {
+ "fragment": {
+ "argumentDefinitions": (v0/*: any*/),
+ "kind": "Fragment",
+ "metadata": null,
+ "name": "CompliancePageLayoutQuery",
+ "selections": [
+ {
+ "alias": "organization",
+ "args": (v1/*: any*/),
+ "concreteType": null,
+ "kind": "LinkedField",
+ "name": "node",
+ "plural": false,
+ "selections": [
+ (v2/*: any*/),
+ {
+ "kind": "InlineFragment",
+ "selections": [
+ {
+ "alias": null,
+ "args": null,
+ "concreteType": "TrustCenter",
+ "kind": "LinkedField",
+ "name": "trustCenter",
+ "plural": false,
+ "selections": [
+ (v3/*: any*/)
+ ],
+ "storageKey": null
+ }
+ ],
+ "type": "Organization",
+ "abstractKey": null
+ }
+ ],
+ "storageKey": null
+ }
+ ],
+ "type": "Query",
+ "abstractKey": null
+ },
+ "kind": "Request",
+ "operation": {
+ "argumentDefinitions": (v0/*: any*/),
+ "kind": "Operation",
+ "name": "CompliancePageLayoutQuery",
+ "selections": [
+ {
+ "alias": "organization",
+ "args": (v1/*: any*/),
+ "concreteType": null,
+ "kind": "LinkedField",
+ "name": "node",
+ "plural": false,
+ "selections": [
+ (v2/*: any*/),
+ {
+ "kind": "InlineFragment",
+ "selections": [
+ {
+ "alias": null,
+ "args": null,
+ "concreteType": "TrustCenter",
+ "kind": "LinkedField",
+ "name": "trustCenter",
+ "plural": false,
+ "selections": [
+ (v3/*: any*/),
+ (v4/*: any*/)
+ ],
+ "storageKey": null
+ }
+ ],
+ "type": "Organization",
+ "abstractKey": null
+ },
+ (v4/*: any*/)
+ ],
+ "storageKey": null
+ }
+ ]
+ },
+ "params": {
+ "cacheID": "dca289c0f586e539bfee9c68ccd14e37",
+ "id": null,
+ "metadata": {},
+ "name": "CompliancePageLayoutQuery",
+ "operationKind": "query",
+ "text": "query CompliancePageLayoutQuery(\n $organizationId: ID!\n) {\n organization: node(id: $organizationId) {\n __typename\n ... on Organization {\n trustCenter {\n active\n id\n }\n }\n id\n }\n}\n"
+ }
+};
+})();
+
+(node as any).hash = "0134cd2bfcc281c33161c3693172af0c";
+
+export default node;
diff --git a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
index 499116149..86b5efee6 100644
--- a/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
+++ b/apps/console/src/pages/iam/organizations/_components/Sidebar.tsx
@@ -198,11 +198,18 @@ export function Sidebar(props: { fKey: SidebarFragment$key }) {
/>
)}
{organization.canGetTrustCenter && (
-
+ <>
+
+
+ >
)}
{organization.canUpdateOrganization && (
}) {
+ const { queryRef } = props;
+
+ const organizationId = useOrganizationId();
+ const { __ } = useTranslate();
+
+ usePageTitle(__("Compliance Page"));
+
+ const { organization } = usePreloadedQuery(compliancePageLayoutQuery, queryRef);
+ if (organization.__typename !== "Organization") {
+ throw new Error("invalid type for node");
+ }
+
+ return (
+
+
+
+ {organization.trustCenter?.active ? __("Active") : __("Inactive")}
+
+
+
+
+
+
+ {__("Overview")}
+
+
+
+ {__("Trusted by")}
+
+
+
+ {__("Audits")}
+
+
+
+ {__("Documents")}
+
+
+
+ {__("Files")}
+
+
+
+ {__("Vendors")}
+
+
+
+ {__("Access")}
+
+
+
+
+
+ );
+}
diff --git a/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx b/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx
new file mode 100644
index 000000000..0435b2c29
--- /dev/null
+++ b/apps/console/src/pages/organizations/compliance-page/CompliancePageLayoutLoader.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useQueryLoader } from "react-relay";
+
+import type { CompliancePageLayoutQuery } from "#/__generated__/core/CompliancePageLayoutQuery.graphql";
+import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
+import { useOrganizationId } from "#/hooks/useOrganizationId";
+import { CoreRelayProvider } from "#/providers/CoreRelayProvider";
+
+import { CompliancePageLayout, compliancePageLayoutQuery } from "./CompliancePageLayout";
+
+function CompliancePageLayoutQueryLoader() {
+ const organizationId = useOrganizationId();
+ const [queryRef, loadQuery] = useQueryLoader(compliancePageLayoutQuery);
+
+ useEffect(() => {
+ if (!queryRef) {
+ loadQuery({ organizationId });
+ }
+ });
+
+ if (!queryRef) return ;
+
+ return ;
+}
+
+export default function CompliancePageLayoutLoader() {
+ return (
+
+
+
+ );
+}
diff --git a/apps/console/src/pages/organizations/compliance-page/routes.ts b/apps/console/src/pages/organizations/compliance-page/routes.ts
new file mode 100644
index 000000000..75894c25b
--- /dev/null
+++ b/apps/console/src/pages/organizations/compliance-page/routes.ts
@@ -0,0 +1,11 @@
+import { lazy } from "@probo/react-lazy";
+
+import { PageSkeleton } from "#/components/skeletons/PageSkeleton";
+
+export const compliancePageRoutes = [
+ {
+ path: "compliance-page",
+ Fallback: PageSkeleton,
+ Component: lazy(() => import("#/pages/organizations/compliance-page/CompliancePageLayoutLoader")),
+ },
+];
diff --git a/apps/console/src/routes.tsx b/apps/console/src/routes.tsx
index 834ec3f07..ff0280703 100644
--- a/apps/console/src/routes.tsx
+++ b/apps/console/src/routes.tsx
@@ -16,6 +16,7 @@ import {
import { PageError } from "./components/PageError";
import { PageSkeleton } from "./components/skeletons/PageSkeleton";
import { ViewerLayoutLoading } from "./pages/iam/memberships/ViewerLayoutLoading";
+import { compliancePageRoutes } from "./pages/organizations/compliance-page/routes";
import { CurrentUser } from "./providers/CurrentUser";
import { assetRoutes } from "./routes/assetRoutes";
import { auditRoutes } from "./routes/auditRoutes";
@@ -248,6 +249,7 @@ const routes = [
...rightsRequestRoutes,
...processingActivityRoutes,
...statesOfApplicabilityRoutes,
+ ...compliancePageRoutes,
...trustCenterRoutes,
...snapshotsRoutes,
{