Change state of applicability

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/__generated__/SnapshotBannerQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<c2504ebd6a90f696d2068c03294d0c53>>
+ * @generated SignedSource<<a62993ad367f0d977f346e507dd6b572>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 export type SnapshotBannerQuery$variables = {
   snapshotId: string;
 };

apps/console/src/components/form/StateOfApplicabilityControlsField.tsx

@@ -0,0 +1,518 @@
+import { useTranslate } from "@probo/i18n";
+import {
+  Field,
+  Select,
+  Option,
+  Checkbox,
+  Textarea,
+  Spinner,
+  Button,
+  IconChevronDown,
+  IconChevronUp,
+  IconTrashCan,
+  IconPlusLarge,
+} from "@probo/ui";
+import { Suspense, useState, useMemo, useEffect } from "react";
+import { Controller, type Control, type UseFormSetValue, type FieldValues, type Path, type PathValue } from "react-hook-form";
+import { useLazyLoadQuery } from "react-relay";
+import { graphql } from "relay-runtime";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import type { StateOfApplicabilityControlsFieldFrameworksQuery } from "./__generated__/StateOfApplicabilityControlsFieldFrameworksQuery.graphql";
+import type { StateOfApplicabilityControlsFieldFrameworkControlsQuery } from "./__generated__/StateOfApplicabilityControlsFieldFrameworkControlsQuery.graphql";
+
+const frameworksQuery = graphql`
+  query StateOfApplicabilityControlsFieldFrameworksQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      ... on Organization {
+        frameworks(first: 100) {
+          edges {
+            node {
+              id
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+const frameworkControlsQuery = graphql`
+  query StateOfApplicabilityControlsFieldFrameworkControlsQuery(
+    $frameworkId: ID!
+  ) {
+    framework: node(id: $frameworkId) {
+      ... on Framework {
+        id
+        controls(first: 500, orderBy: { field: SECTION_TITLE, direction: ASC }) {
+          edges {
+            node {
+              id
+              sectionTitle
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+type ControlSelection = {
+  controlId: string;
+  state: "EXCLUDED" | "IMPLEMENTED" | "NOT_IMPLEMENTED";
+  exclusionJustification?: string;
+};
+
+type FrameworkData = {
+  id: string;
+  name: string;
+  controls: Array<{
+    id: string;
+    sectionTitle: string;
+    name: string;
+  }>;
+};
+
+type Props<T extends FieldValues = FieldValues> = {
+  control: Control<T>;
+  setValue: UseFormSetValue<T>;
+  name: string;
+  initialControls?: ControlSelection[];
+  initialFrameworkIds?: Set<string>;
+};
+
+export function StateOfApplicabilityControlsField<T extends FieldValues = FieldValues>({ control, setValue, name, initialControls, initialFrameworkIds }: Props<T>) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+
+  // Initialize form value with initialControls
+  useEffect(() => {
+    if (initialControls && initialControls.length > 0) {
+      setValue(name as Path<T>, initialControls as PathValue<T, Path<T>>);
+    }
+  }, [initialControls, setValue, name]);
+
+  // Initialize framework selection from initialFrameworkIds
+  const [selectedFrameworkIds, setSelectedFrameworkIds] = useState<Set<string>>(initialFrameworkIds || new Set());
+  const [expandedFrameworks, setExpandedFrameworks] = useState<Set<string>>(initialFrameworkIds || new Set());
+  const [frameworkDataMap, setFrameworkDataMap] = useState<Map<string, FrameworkData>>(new Map());
+  const [newFrameworkId, setNewFrameworkId] = useState<string>("");
+
+  // Update framework selection when initialFrameworkIds changes
+  useEffect(() => {
+    if (initialFrameworkIds) {
+      setSelectedFrameworkIds(initialFrameworkIds);
+      setExpandedFrameworks(initialFrameworkIds);
+    }
+  }, [initialFrameworkIds]);
+
+  const addFramework = (frameworkId: string) => {
+    if (!frameworkId || selectedFrameworkIds.has(frameworkId)) return;
+    setSelectedFrameworkIds(new Set([...selectedFrameworkIds, frameworkId]));
+    setExpandedFrameworks(new Set([...expandedFrameworks, frameworkId]));
+    setNewFrameworkId("");
+  };
+
+  const removeFramework = (frameworkId: string) => {
+    const newSet = new Set(selectedFrameworkIds);
+    newSet.delete(frameworkId);
+    setSelectedFrameworkIds(newSet);
+
+    const newExpanded = new Set(expandedFrameworks);
+    newExpanded.delete(frameworkId);
+    setExpandedFrameworks(newExpanded);
+
+    const newMap = new Map(frameworkDataMap);
+    newMap.delete(frameworkId);
+    setFrameworkDataMap(newMap);
+  };
+
+  const toggleFramework = (frameworkId: string) => {
+    const newExpanded = new Set(expandedFrameworks);
+    if (newExpanded.has(frameworkId)) {
+      newExpanded.delete(frameworkId);
+    } else {
+      newExpanded.add(frameworkId);
+    }
+    setExpandedFrameworks(newExpanded);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h4 className="font-medium text-txt-primary mb-4">
+          {__("Select Controls")}
+        </h4>
+
+        <div className="space-y-3">
+          <Field label={__("Add Framework")}>
+            <Suspense fallback={<Select variant="editor" disabled placeholder={__("Loading...")} />}>
+              <FrameworkSelect
+                organizationId={organizationId}
+                selectedFrameworkIds={selectedFrameworkIds}
+                value={newFrameworkId}
+                onValueChange={setNewFrameworkId}
+                onAdd={addFramework}
+              />
+            </Suspense>
+          </Field>
+
+          {Array.from(selectedFrameworkIds).map((frameworkId) => (
+            <Suspense
+              key={frameworkId}
+              fallback={
+                <div className="flex items-center justify-center py-8">
+                  <Spinner />
+                </div>
+              }
+            >
+              <FrameworkSection
+                frameworkId={frameworkId}
+                isExpanded={expandedFrameworks.has(frameworkId)}
+                onToggle={() => toggleFramework(frameworkId)}
+                onRemove={() => removeFramework(frameworkId)}
+                control={control}
+                name={name}
+                frameworkDataMap={frameworkDataMap}
+                setFrameworkDataMap={setFrameworkDataMap}
+              />
+            </Suspense>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FrameworkSelect({
+  organizationId,
+  selectedFrameworkIds,
+  value,
+  onValueChange,
+  onAdd,
+}: {
+  organizationId: string;
+  selectedFrameworkIds: Set<string>;
+  value: string;
+  onValueChange: (value: string) => void;
+  onAdd: (frameworkId: string) => void;
+}) {
+  const { __ } = useTranslate();
+  const data = useLazyLoadQuery<StateOfApplicabilityControlsFieldFrameworksQuery>(
+    frameworksQuery,
+    { organizationId },
+    { fetchPolicy: "network-only" }
+  );
+  const frameworks: Array<{ id: string; name: string }> =
+    (data?.organization && "frameworks" in data.organization && data.organization.frameworks?.edges
+      ?.map((edge) => edge.node)
+      .filter((node): node is NonNullable<typeof node> => node !== null)) || [];
+
+  const availableFrameworks = frameworks.filter(
+    (framework: { id: string; name: string }) => !selectedFrameworkIds.has(framework.id)
+  );
+
+  return (
+    <div className="flex gap-2">
+      <Select
+        variant="editor"
+        placeholder={__("Select a framework")}
+        onValueChange={onValueChange}
+        value={value}
+        className="flex-1"
+      >
+        {availableFrameworks.map((framework: { id: string; name: string }) => (
+          <Option key={framework.id} value={framework.id}>
+            {framework.name}
+          </Option>
+        ))}
+      </Select>
+      <Button
+        type="button"
+        variant="secondary"
+        icon={IconPlusLarge}
+        onClick={() => onAdd(value)}
+        disabled={!value || selectedFrameworkIds.has(value)}
+      >
+        {__("Add")}
+      </Button>
+    </div>
+  );
+}
+
+function FrameworkSection<T extends FieldValues = FieldValues>({
+  frameworkId,
+  isExpanded,
+  onToggle,
+  onRemove,
+  control,
+  name,
+  frameworkDataMap,
+  setFrameworkDataMap,
+}: {
+  frameworkId: string;
+  isExpanded: boolean;
+  onToggle: () => void;
+  onRemove: () => void;
+  control: Control<T>;
+  name: string;
+  frameworkDataMap: Map<string, FrameworkData>;
+  setFrameworkDataMap: React.Dispatch<React.SetStateAction<Map<string, FrameworkData>>>;
+}) {
+  const { __ } = useTranslate();
+  const data = useLazyLoadQuery<StateOfApplicabilityControlsFieldFrameworkControlsQuery>(
+    frameworkControlsQuery,
+    { frameworkId },
+    { fetchPolicy: "network-only" }
+  );
+
+  const framework = data?.framework && "controls" in data.framework ? data.framework : null;
+  const frameworkName: string = framework && "name" in framework && typeof framework.name === "string" ? framework.name : "";
+  const controls: Array<{ id: string; sectionTitle: string; name: string }> = useMemo(
+    () =>
+      (framework?.controls?.edges
+        ?.map((edge) => edge.node)
+        .filter((node): node is NonNullable<typeof node> => node !== null)) ?? [],
+    [framework]
+  );
+
+  useEffect(() => {
+    if (framework && !frameworkDataMap.has(frameworkId)) {
+      setFrameworkDataMap((prev) => {
+        const newMap = new Map(prev);
+        newMap.set(frameworkId, {
+          id: frameworkId,
+          name: frameworkName,
+          controls,
+        });
+        return newMap;
+      });
+    }
+  }, [framework, frameworkId, frameworkName, controls, frameworkDataMap, setFrameworkDataMap]);
+
+  const cachedData = frameworkDataMap.get(frameworkId);
+  const displayName: string = cachedData?.name || frameworkName;
+  const displayControls: Array<{ id: string; sectionTitle: string; name: string }> = cachedData?.controls || controls;
+
+  return (
+    <div className="border border-border-low rounded-lg">
+      <div className="flex items-center justify-between p-4">
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex items-center gap-2 flex-1 text-left hover:bg-subtle -m-4 p-4 rounded-lg"
+        >
+          {isExpanded ? (
+            <IconChevronUp size={16} className="text-txt-tertiary" />
+          ) : (
+            <IconChevronDown size={16} className="text-txt-tertiary" />
+          )}
+          <span className="font-medium text-txt-primary">{displayName}</span>
+          <span className="text-sm text-txt-tertiary">
+            ({displayControls.length} {__("controls")})
+          </span>
+        </button>
+        <Button
+          type="button"
+          variant="secondary"
+          icon={IconTrashCan}
+          onClick={onRemove}
+          className="ml-2"
+        >
+          {__("Remove")}
+        </Button>
+      </div>
+
+      {isExpanded && (
+        <div className="border-t border-border-low">
+          <Controller
+            control={control}
+            name={name as Path<T>}
+            render={({ field }) => {
+              const selectedControls: ControlSelection[] = (Array.isArray(field.value) ? field.value : []) as ControlSelection[];
+              const selectedControlIds = new Set(
+                selectedControls.map((c: ControlSelection) => c.controlId)
+              );
+
+              const toggleControl = (controlId: string) => {
+                const isSelected = selectedControlIds.has(controlId);
+                if (isSelected) {
+                  field.onChange(
+                    selectedControls.filter((c: ControlSelection) => c.controlId !== controlId)
+                  );
+                } else {
+                  field.onChange([
+                    ...selectedControls,
+                    {
+                      controlId,
+                      state: "IMPLEMENTED" as const,
+                      exclusionJustification: undefined,
+                    },
+                  ]);
+                }
+              };
+
+              const updateControlState = (
+                controlId: string,
+                state: "EXCLUDED" | "IMPLEMENTED" | "NOT_IMPLEMENTED"
+              ) => {
+                field.onChange(
+                  selectedControls.map((c: ControlSelection) =>
+                    c.controlId === controlId ? { ...c, state } : c
+                  )
+                );
+              };
+
+              const updateJustification = (
+                controlId: string,
+                exclusionJustification: string
+              ) => {
+                field.onChange(
+                  selectedControls.map((c: ControlSelection) =>
+                    c.controlId === controlId
+                      ? { ...c, exclusionJustification }
+                      : c
+                  )
+                );
+              };
+
+              const getControlState = (controlId: string) => {
+                const selected = selectedControls.find((c: ControlSelection) => c.controlId === controlId);
+                return selected?.state || "IMPLEMENTED";
+              };
+
+              const getExclusionJustification = (controlId: string) => {
+                const selected = selectedControls.find((c: ControlSelection) => c.controlId === controlId);
+                return selected?.exclusionJustification || "";
+              };
+
+              const selectAll = () => {
+                const newSelectedControls: ControlSelection[] = [...selectedControls];
+                displayControls.forEach((ctrl) => {
+                  if (!selectedControlIds.has(ctrl.id)) {
+                    newSelectedControls.push({
+                      controlId: ctrl.id,
+                      state: "IMPLEMENTED" as const,
+                      exclusionJustification: undefined,
+                    });
+                  }
+                });
+                field.onChange(newSelectedControls);
+              };
+
+              const deselectAll = () => {
+                const controlIdsToRemove = new Set(displayControls.map((ctrl) => ctrl.id));
+                const newSelectedControls = selectedControls.filter(
+                  (c: ControlSelection) => !controlIdsToRemove.has(c.controlId)
+                );
+                field.onChange(newSelectedControls);
+              };
+
+              const allSelected = displayControls.length > 0 && displayControls.every((ctrl) => selectedControlIds.has(ctrl.id));
+
+              return (
+                <div className="p-4 space-y-4">
+                  {displayControls.length > 0 && (
+                    <div className="flex justify-end">
+                      <Button
+                        type="button"
+                        variant="quaternary"
+                        onClick={allSelected ? deselectAll : selectAll}
+                        className="text-xs h-7 min-h-7"
+                      >
+                        {allSelected ? __("Deselect All") : __("Select All")}
+                      </Button>
+                    </div>
+                  )}
+                  <div className="border border-border-low rounded-lg max-h-96 overflow-y-auto">
+                    {displayControls.length === 0 ? (
+                      <div className="p-4 text-center text-txt-tertiary">
+                        {__("No controls found in this framework")}
+                      </div>
+                    ) : (
+                      <div className="divide-y divide-border-low">
+                        {displayControls.map((ctrl) => {
+                          const isSelected = selectedControlIds.has(ctrl.id);
+                          const state = getControlState(ctrl.id);
+                          const exclusionJustification = getExclusionJustification(
+                            ctrl.id
+                          );
+
+                          return (
+                            <div key={ctrl.id} className="p-4 space-y-3">
+                              <div className="flex items-start gap-3">
+                                <Checkbox
+                                  checked={isSelected}
+                                  onChange={() => toggleControl(ctrl.id)}
+                                />
+                                <div className="flex-1 min-w-0">
+                                  <div className="font-medium">
+                                    {ctrl.sectionTitle}: {ctrl.name}
+                                  </div>
+                                </div>
+                              </div>
+
+                              {isSelected && (
+                                <div className="ml-7 space-y-2">
+                                  <Field label={__("State")}>
+                                    <Select
+                                      variant="editor"
+                                      value={state}
+                                      onValueChange={(value) =>
+                                        updateControlState(
+                                          ctrl.id,
+                                          value as
+                                            | "EXCLUDED"
+                                            | "IMPLEMENTED"
+                                            | "NOT_IMPLEMENTED"
+                                        )
+                                      }
+                                      className="w-full"
+                                    >
+                                      <Option value="IMPLEMENTED">
+                                        {__("Implemented")}
+                                      </Option>
+                                      <Option value="NOT_IMPLEMENTED">
+                                        {__("Not Implemented")}
+                                      </Option>
+                                      <Option value="EXCLUDED">
+                                        {__("Excluded")}
+                                      </Option>
+                                    </Select>
+                                  </Field>
+
+                                  {state === "EXCLUDED" || state === "NOT_IMPLEMENTED" && (
+                                    <Field label={__("Justification")}>
+                                      <Textarea
+                                        value={exclusionJustification}
+                                        onChange={(e) =>
+                                          updateJustification(
+                                            ctrl.id,
+                                            e.target.value
+                                          )
+                                        }
+                                        placeholder={__(
+                                          "Reason for exclusion"
+                                        )}
+                                        autogrow
+                                      />
+                                    </Field>
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

apps/console/src/components/form/__generated__/StateOfApplicabilityControlsFieldFrameworkControlsQuery.graphql.ts

@@ -0,0 +1,197 @@
+/**
+ * @generated SignedSource<<760a4c9ef58d487ab996d36a6cf1aa21>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type StateOfApplicabilityControlsFieldFrameworkControlsQuery$variables = {
+  frameworkId: string;
+};
+export type StateOfApplicabilityControlsFieldFrameworkControlsQuery$data = {
+  readonly framework: {
+    readonly controls?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly name: string;
+          readonly sectionTitle: string;
+        };
+      }>;
+    };
+    readonly id?: string;
+  };
+};
+export type StateOfApplicabilityControlsFieldFrameworkControlsQuery = {
+  response: StateOfApplicabilityControlsFieldFrameworkControlsQuery$data;
+  variables: StateOfApplicabilityControlsFieldFrameworkControlsQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "frameworkId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "frameworkId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": [
+    {
+      "kind": "Literal",
+      "name": "first",
+      "value": 500
+    },
+    {
+      "kind": "Literal",
+      "name": "orderBy",
+      "value": {
+        "direction": "ASC",
+        "field": "SECTION_TITLE"
+      }
+    }
+  ],
+  "concreteType": "ControlConnection",
+  "kind": "LinkedField",
+  "name": "controls",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "ControlEdge",
+      "kind": "LinkedField",
+      "name": "edges",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "Control",
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [
+            (v2/*: any*/),
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "sectionTitle",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "name",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": "controls(first:500,orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityControlsFieldFrameworkControlsQuery",
+    "selections": [
+      {
+        "alias": "framework",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/)
+            ],
+            "type": "Framework",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityControlsFieldFrameworkControlsQuery",
+    "selections": [
+      {
+        "alias": "framework",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v3/*: any*/)
+            ],
+            "type": "Framework",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "4e57853f9452f6167ef9dd2521f0b998",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityControlsFieldFrameworkControlsQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityControlsFieldFrameworkControlsQuery(\n  $frameworkId: ID!\n) {\n  framework: node(id: $frameworkId) {\n    __typename\n    ... on Framework {\n      id\n      controls(first: 500, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n        edges {\n          node {\n            id\n            sectionTitle\n            name\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "2817a6951ce5ad1efdee9951636916ff";
+
+export default node;

apps/console/src/components/form/__generated__/StateOfApplicabilityControlsFieldFrameworksQuery.graphql.ts

@@ -0,0 +1,172 @@
+/**
+ * @generated SignedSource<<09147ad036a4ae9295cd5fc5242f6ee7>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type StateOfApplicabilityControlsFieldFrameworksQuery$variables = {
+  organizationId: string;
+};
+export type StateOfApplicabilityControlsFieldFrameworksQuery$data = {
+  readonly organization: {
+    readonly frameworks?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly name: string;
+        };
+      }>;
+    };
+  };
+};
+export type StateOfApplicabilityControlsFieldFrameworksQuery = {
+  response: StateOfApplicabilityControlsFieldFrameworksQuery$data;
+  variables: StateOfApplicabilityControlsFieldFrameworksQuery$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": "id",
+  "storageKey": null
+},
+v3 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": [
+        {
+          "kind": "Literal",
+          "name": "first",
+          "value": 100
+        }
+      ],
+      "concreteType": "FrameworkConnection",
+      "kind": "LinkedField",
+      "name": "frameworks",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "FrameworkEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "Framework",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v2/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "name",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": "frameworks(first:100)"
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityControlsFieldFrameworksQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityControlsFieldFrameworksQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v3/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "88fe75a1aeca2c9971693ed79bf82afe",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityControlsFieldFrameworksQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityControlsFieldFrameworksQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      frameworks(first: 100) {\n        edges {\n          node {\n            id\n            name\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "5a0adc0c46445f40980fdb8edb8122ce";
+
+export default node;

apps/console/src/components/snapshots/__generated__/LinkedSnapshotsCardFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<0b0392559fe2c7b5b92bec1b1131f9c6>>
+ * @generated SignedSource<<18ad235cee2891b222acb016b8986050>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ReaderFragment } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 import { FragmentRefs } from "relay-runtime";
 export type LinkedSnapshotsCardFragment$data = {
   readonly createdAt: any;

apps/console/src/components/snapshots/__generated__/LinkedSnapshotsDialogFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<21edb2424074940efad82c63929642c8>>
+ * @generated SignedSource<<4b2fe0335336a1c3888d8da35ffd8e58>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ReaderFragment } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 import { FragmentRefs } from "relay-runtime";
 export type LinkedSnapshotsDialogFragment$data = {
   readonly id: string;

apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityCard.tsx

@@ -0,0 +1,248 @@
+import { graphql } from "relay-runtime";
+import {
+  Card,
+  IconPlusLarge,
+  Button,
+  Tr,
+  Td,
+  Table,
+  Thead,
+  Tbody,
+  Th,
+  IconChevronDown,
+  IconTrashCan,
+  TrButton,
+  Badge,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import type { LinkedStatesOfApplicabilityCardFragment$key } from "./__generated__/LinkedStatesOfApplicabilityCardFragment.graphql";
+import { useFragment } from "react-relay";
+import { useMemo, useState, useEffect } from "react";
+import { sprintf } from "@probo/helpers";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import { LinkedStatesOfApplicabilityDialog } from "./LinkedStatesOfApplicabilityDialog";
+import clsx from "clsx";
+
+const linkedStateOfApplicabilityFragment = graphql`
+  fragment LinkedStatesOfApplicabilityCardFragment on StateOfApplicabilityControl {
+    id
+    stateOfApplicabilityId
+    controlId
+    stateOfApplicability {
+      id
+      name
+    }
+    applicability
+    justification
+  }
+`;
+
+type AttachMutation<Params> = (p: {
+  variables: {
+    input: {
+      stateOfApplicabilityId: string;
+      applicability: boolean;
+      justification: string | null;
+    } & Params;
+    connections: string[];
+  };
+}) => void;
+
+type DetachMutation = (p: {
+  variables: {
+    input: {
+      stateOfApplicabilityId: string;
+      controlId: string;
+    };
+    connections: string[];
+  };
+}) => void;
+
+type Props<Params> = {
+  statesOfApplicability: readonly (LinkedStatesOfApplicabilityCardFragment$key & { id: string })[];
+  params: Params;
+  disabled?: boolean;
+  connectionId: string;
+  onAttach: AttachMutation<Params>;
+  onDetach: DetachMutation;
+  variant?: "card" | "table";
+  readOnly?: boolean;
+};
+
+export function LinkedStatesOfApplicabilityCard<Params>(props: Props<Params>) {
+  const { __ } = useTranslate();
+
+  const [limit, setLimit] = useState<number | null>(
+    props.variant === "card" ? 4 : null
+  );
+
+  const [linkedInfo, setLinkedInfo] = useState<{ stateOfApplicabilityId: string; controlId: string }[]>([]);
+
+  const statesOfApplicability = useMemo(() => {
+    return limit ? props.statesOfApplicability.slice(0, limit) : props.statesOfApplicability;
+  }, [props.statesOfApplicability, limit]);
+
+  const showMoreButton = limit !== null && props.statesOfApplicability.length > limit;
+  const variant = props.variant ?? "table";
+
+  const linkedData = linkedInfo;
+
+  const onAttach = (stateOfApplicabilityId: string, applicability: boolean, justification: string | null) => {
+    props.onAttach({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          applicability,
+          justification,
+          ...props.params,
+        },
+        connections: [props.connectionId],
+      },
+    });
+  };
+
+  const onDetach = (stateOfApplicabilityId: string, controlId: string) => {
+    props.onDetach({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          controlId,
+        },
+        connections: [props.connectionId],
+      },
+    });
+  };
+
+  const Wrapper = variant === "card" ? Card : "div";
+
+  return (
+    <Wrapper padded className="space-y-[10px]">
+      {props.statesOfApplicability.map((soa, idx) => (
+        <LinkedInfoExtractor
+          key={idx}
+          fragment={soa}
+          onExtracted={(info) => {
+            setLinkedInfo(prev => {
+              const exists = prev.some(p =>
+                p.stateOfApplicabilityId === info.stateOfApplicabilityId &&
+                p.controlId === info.controlId
+              );
+              return exists ? prev : [...prev, info];
+            });
+          }}
+        />
+      ))}
+      {variant === "card" && (
+        <div className="flex justify-between">
+          <div className="text-lg font-semibold">{__("States of Applicability")}</div>
+          {!props.readOnly && (
+            <LinkedStatesOfApplicabilityDialog
+              connectionId={props.connectionId}
+              disabled={props.disabled}
+              linkedStatesOfApplicability={linkedData}
+              onLink={onAttach}
+              onUnlink={onDetach}
+            >
+              <Button variant="tertiary" icon={IconPlusLarge}>
+                {__("Link state of applicability")}
+              </Button>
+            </LinkedStatesOfApplicabilityDialog>
+          )}
+        </div>
+      )}
+      <Table className={clsx(variant === "card" && "bg-invert")}>
+        <Thead>
+          <Tr>
+            <Th>{__("Name")}</Th>
+            <Th>{__("Applicability")}</Th>
+            <Th>{__("Justification")}</Th>
+            {!props.readOnly && <Th></Th>}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {statesOfApplicability.length === 0 && (
+            <Tr>
+              <Td colSpan={props.readOnly ? 3 : 4} className="text-center text-txt-secondary">
+                {__("No states of applicability linked")}
+              </Td>
+            </Tr>
+          )}
+          {statesOfApplicability.map((soa) => (
+            <StateOfApplicabilityRow key={soa.id} stateOfApplicability={soa} onClick={onDetach} readOnly={props.readOnly} />
+          ))}
+          {variant === "table" && !props.readOnly && (
+            <LinkedStatesOfApplicabilityDialog
+              connectionId={props.connectionId}
+              disabled={props.disabled}
+              linkedStatesOfApplicability={linkedData}
+              onLink={onAttach}
+              onUnlink={onDetach}
+            >
+              <TrButton colspan={4} icon={IconPlusLarge}>
+                {__("Link state of applicability")}
+              </TrButton>
+            </LinkedStatesOfApplicabilityDialog>
+          )}
+        </Tbody>
+      </Table>
+      {showMoreButton && (
+        <Button
+          variant="tertiary"
+          icon={IconChevronDown}
+          onClick={() => setLimit(null)}
+        >
+          {sprintf(__("Show %d more"), props.statesOfApplicability.length - limit!)}
+        </Button>
+      )}
+    </Wrapper>
+  );
+}
+
+function LinkedInfoExtractor(props: {
+  fragment: LinkedStatesOfApplicabilityCardFragment$key;
+  onExtracted: (info: { stateOfApplicabilityId: string; controlId: string }) => void;
+}) {
+  const data = useFragment(linkedStateOfApplicabilityFragment, props.fragment);
+
+  useEffect(() => {
+    props.onExtracted({
+      stateOfApplicabilityId: data.stateOfApplicabilityId,
+      controlId: data.controlId,
+    });
+  }, [data.stateOfApplicabilityId, data.controlId, props.onExtracted]);
+
+  return null;
+}
+
+function StateOfApplicabilityRow(props: {
+  stateOfApplicability: LinkedStatesOfApplicabilityCardFragment$key & { id: string };
+  onClick: (stateOfApplicabilityId: string, controlId: string) => void;
+  readOnly?: boolean;
+}) {
+  const soa = useFragment(linkedStateOfApplicabilityFragment, props.stateOfApplicability);
+  const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+
+  return (
+    <Tr to={`/organizations/${organizationId}/states-of-applicability/${soa.stateOfApplicabilityId}`}>
+      <Td>{soa.stateOfApplicability.name}</Td>
+      <Td>
+        <Badge variant={soa.applicability ? "success" : "danger"}>
+          {soa.applicability ? __("Applicable") : __("Not Applicable")}
+        </Badge>
+      </Td>
+      <Td>{soa.justification || "-"}</Td>
+      {!props.readOnly && (
+        <Td noLink width={50} className="text-end">
+          <Button
+            variant="secondary"
+            onClick={() => props.onClick(soa.stateOfApplicabilityId, soa.controlId)}
+            icon={IconTrashCan}
+          >
+            {__("Unlink")}
+          </Button>
+        </Td>
+      )}
+    </Tr>
+  );
+}

apps/console/src/components/states-of-applicability/LinkedStatesOfApplicabilityDialog.tsx

@@ -0,0 +1,180 @@
+import { useTranslate } from "@probo/i18n";
+import { Dialog, DialogContent, DialogFooter, Button, Checkbox, Textarea, Badge } from "@probo/ui";
+import { Suspense, useState, useRef } from "react";
+import type { ReactNode } from "react";
+import { useLazyLoadQuery } from "react-relay";
+import { graphql } from "relay-runtime";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import type { LinkedStatesOfApplicabilityDialogQuery } from "./__generated__/LinkedStatesOfApplicabilityDialogQuery.graphql";
+
+const query = graphql`
+  query LinkedStatesOfApplicabilityDialogQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      ... on Organization {
+        statesOfApplicability(first: 100) {
+          edges {
+            node {
+              id
+              name
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+type LinkedSOAInfo = {
+  stateOfApplicabilityId: string;
+  controlId: string;
+};
+
+type Props = {
+  children: ReactNode;
+  connectionId: string;
+  disabled?: boolean;
+  linkedStatesOfApplicability: readonly LinkedSOAInfo[];
+  onLink: (stateOfApplicabilityId: string, applicability: boolean, justification: string | null) => void;
+  onUnlink: (stateOfApplicabilityId: string, controlId: string) => void;
+};
+
+export function LinkedStatesOfApplicabilityDialog({ children, ...props }: Props) {
+  const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
+
+  return (
+    <Dialog ref={dialogRef} trigger={children} title="Link State of Applicability">
+      <Suspense fallback={<div>Loading...</div>}>
+        <LinkedStatesOfApplicabilityDialogContent {...props} onClose={() => dialogRef.current?.close()} />
+      </Suspense>
+    </Dialog>
+  );
+}
+
+function LinkedStatesOfApplicabilityDialogContent(props: Omit<Props, "children"> & { onClose: () => void }) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const [selectedSOA, setSelectedSOA] = useState<{ id: string; name: string } | null>(null);
+  const [applicability, setApplicability] = useState(true);
+  const [justification, setJustification] = useState("");
+
+  const data = useLazyLoadQuery<LinkedStatesOfApplicabilityDialogQuery>(query, {
+    organizationId,
+  }, { fetchPolicy: "network-only" });
+
+  const linkedSOAIds = new Set(props.linkedStatesOfApplicability.map((soa) => soa.stateOfApplicabilityId));
+  const linkedSOAMap = new Map(props.linkedStatesOfApplicability.map((soa) => [soa.stateOfApplicabilityId, soa]));
+  const statesOfApplicability = data.organization?.statesOfApplicability?.edges.map((edge) => edge.node) ?? [];
+
+  const handleSelectSOA = (soa: { id: string; name: string }) => {
+    setSelectedSOA(soa);
+    setApplicability(true);
+    setJustification("");
+  };
+
+  const handleLink = () => {
+    if (selectedSOA) {
+      props.onLink(selectedSOA.id, applicability, justification.trim() || null);
+      props.onClose();
+    }
+  };
+
+  const handleUnlink = (stateOfApplicabilityId: string) => {
+    const linkedSOA = linkedSOAMap.get(stateOfApplicabilityId);
+    if (linkedSOA) {
+      props.onUnlink(linkedSOA.stateOfApplicabilityId, linkedSOA.controlId);
+    }
+  };
+
+  return (
+    <>
+      <DialogContent padded className="space-y-4">
+        {statesOfApplicability.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="text-txt-secondary text-base mb-2">
+              {__("No states of applicability available")}
+            </div>
+            <div className="text-txt-tertiary text-sm">
+              {__("Create a state of applicability first to link it to this control")}
+            </div>
+          </div>
+        ) : !selectedSOA ? (
+          <div className="space-y-2">
+            <div className="text-sm font-medium mb-2">{__("Select a state of applicability:")}</div>
+            {statesOfApplicability.map((soa) => {
+              const isLinked = linkedSOAIds.has(soa.id);
+              return (
+                <div
+                  key={soa.id}
+                  className={`border border-border-low rounded-lg p-3 flex items-center justify-between ${!isLinked ? 'hover:bg-hover cursor-pointer' : ''}`}
+                  onClick={() => !isLinked && handleSelectSOA(soa)}
+                >
+                  <div className="font-medium">{soa.name}</div>
+                  {isLinked ? (
+                    <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
+                      <Badge variant="success">{__("Linked")}</Badge>
+                      <Button
+                        variant="danger"
+                        onClick={() => handleUnlink(soa.id)}
+                        disabled={props.disabled}
+                      >
+                        {__("Unlink")}
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <div className="text-sm text-txt-secondary mb-1">{__("Selected:")}</div>
+                <div className="text-lg font-medium">{selectedSOA.name}</div>
+              </div>
+              <Button variant="tertiary" onClick={() => setSelectedSOA(null)}>
+                {__("Change")}
+              </Button>
+            </div>
+
+            <div className="border-t border-border-low pt-4 space-y-3">
+              <label className="flex items-center gap-2 cursor-pointer">
+                <Checkbox
+                  checked={applicability}
+                  onChange={(checked) => setApplicability(checked)}
+                />
+                <span className="font-medium">{__("Applicable")}</span>
+              </label>
+
+              <div>
+                <label className="text-sm font-medium mb-1 block">
+                  {__("Justification (optional)")}
+                </label>
+                <Textarea
+                  placeholder={__("Add a justification...")}
+                  value={justification}
+                  onChange={(e) => setJustification(e.target.value)}
+                  rows={3}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </DialogContent>
+      <DialogFooter exitLabel={__("Close")}>
+        {selectedSOA ? (
+          <>
+            <Button variant="secondary" onClick={() => setSelectedSOA(null)}>
+              {__("Back")}
+            </Button>
+            <Button variant="primary" onClick={handleLink} disabled={props.disabled}>
+              {__("Link")}
+            </Button>
+          </>
+        ) : (
+          <></>
+        )}
+      </DialogFooter>
+    </>
+  );
+}

apps/console/src/components/states-of-applicability/__generated__/LinkedStatesOfApplicabilityCardFragment.graphql.ts

@@ -0,0 +1,100 @@
+/**
+ * @generated SignedSource<<fa19c3e1b91d31188625e48b8b6db7e9>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type LinkedStatesOfApplicabilityCardFragment$data = {
+  readonly applicability: boolean;
+  readonly controlId: string;
+  readonly id: string;
+  readonly justification: string | null | undefined;
+  readonly stateOfApplicability: {
+    readonly id: string;
+    readonly name: string;
+  };
+  readonly stateOfApplicabilityId: string;
+  readonly " $fragmentType": "LinkedStatesOfApplicabilityCardFragment";
+};
+export type LinkedStatesOfApplicabilityCardFragment$key = {
+  readonly " $data"?: LinkedStatesOfApplicabilityCardFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"LinkedStatesOfApplicabilityCardFragment">;
+};
+
+const node: ReaderFragment = (function(){
+var v0 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "LinkedStatesOfApplicabilityCardFragment",
+  "selections": [
+    (v0/*: any*/),
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "stateOfApplicabilityId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "controlId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "StateOfApplicability",
+      "kind": "LinkedField",
+      "name": "stateOfApplicability",
+      "plural": false,
+      "selections": [
+        (v0/*: any*/),
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "applicability",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "justification",
+      "storageKey": null
+    }
+  ],
+  "type": "StateOfApplicabilityControl",
+  "abstractKey": null
+};
+})();
+
+(node as any).hash = "b9a9922b27f277a769025f11b0829bdc";
+
+export default node;

apps/console/src/components/states-of-applicability/__generated__/LinkedStatesOfApplicabilityDialogQuery.graphql.ts

@@ -0,0 +1,172 @@
+/**
+ * @generated SignedSource<<a49fb511ab396ea46b199b2ae08edfff>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type LinkedStatesOfApplicabilityDialogQuery$variables = {
+  organizationId: string;
+};
+export type LinkedStatesOfApplicabilityDialogQuery$data = {
+  readonly organization: {
+    readonly statesOfApplicability?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly name: string;
+        };
+      }>;
+    };
+  };
+};
+export type LinkedStatesOfApplicabilityDialogQuery = {
+  response: LinkedStatesOfApplicabilityDialogQuery$data;
+  variables: LinkedStatesOfApplicabilityDialogQuery$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": "id",
+  "storageKey": null
+},
+v3 = {
+  "kind": "InlineFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": [
+        {
+          "kind": "Literal",
+          "name": "first",
+          "value": 100
+        }
+      ],
+      "concreteType": "StateOfApplicabilityConnection",
+      "kind": "LinkedField",
+      "name": "statesOfApplicability",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "StateOfApplicabilityEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "StateOfApplicability",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v2/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "name",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": "statesOfApplicability(first:100)"
+    }
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "LinkedStatesOfApplicabilityDialogQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "LinkedStatesOfApplicabilityDialogQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v3/*: any*/),
+          (v2/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "b36c3216f309865885892fce0d52eac9",
+    "id": null,
+    "metadata": {},
+    "name": "LinkedStatesOfApplicabilityDialogQuery",
+    "operationKind": "query",
+    "text": "query LinkedStatesOfApplicabilityDialogQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      statesOfApplicability(first: 100) {\n        edges {\n          node {\n            id\n            name\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "a6ed2cd0171d834480319779e11fce99";
+
+export default node;

apps/console/src/hooks/graph/FrameworkGraph.ts

@@ -100,6 +100,16 @@ export const frameworkControlNodeQuery = graphql`
         status
         exclusionJustification
         ...FrameworkControlDialogFragment
+        stateOfApplicabilityControls(first: 100)
+          @connection(key: "FrameworkGraphControl_stateOfApplicabilityControls") {
+          __id
+          edges {
+            node {
+              id
+              ...LinkedStatesOfApplicabilityCardFragment
+            }
+          }
+        }
         measures(first: 100)
           @connection(key: "FrameworkGraphControl_measures") {
           __id
@@ -130,6 +140,16 @@ export const frameworkControlNodeQuery = graphql`
             }
           }
         }
+        obligations(first: 100)
+          @connection(key: "FrameworkGraphControl_obligations") {
+          __id
+          edges {
+            node {
+              id
+              ...LinkedObligationsCardFragment
+            }
+          }
+        }
         snapshots(first: 100)
           @connection(key: "FrameworkGraphControl_snapshots") {
           __id

apps/console/src/hooks/graph/ObligationGraph.ts

@@ -29,6 +29,7 @@ export const obligationNodeQuery = graphql`
         requirement
         actionsToBeImplemented
         regulator
+        type
         lastReviewDate
         dueDate
         status
@@ -61,6 +62,7 @@ export const createObligationMutation = graphql`
           requirement
           actionsToBeImplemented
           regulator
+          type
           lastReviewDate
           dueDate
           status
@@ -85,6 +87,7 @@ export const updateObligationMutation = graphql`
         requirement
         actionsToBeImplemented
         regulator
+        type
         lastReviewDate
         dueDate
         status
@@ -151,6 +154,7 @@ export const useCreateObligation = (connectionId: string) => {
     requirement?: string;
     actionsToBeImplemented?: string;
     regulator?: string;
+    type: string;
     ownerId: string;
     lastReviewDate?: string;
     dueDate?: string;
@@ -172,6 +176,7 @@ export const useCreateObligation = (connectionId: string) => {
           requirement: input.requirement,
           actionsToBeImplemented: input.actionsToBeImplemented,
           regulator: input.regulator,
+          type: input.type,
           ownerId: input.ownerId,
           lastReviewDate: input.lastReviewDate,
           dueDate: input.dueDate,
@@ -194,6 +199,7 @@ export const useUpdateObligation = () => {
     requirement?: string;
     actionsToBeImplemented?: string;
     regulator?: string;
+    type?: string;
     ownerId?: string;
     lastReviewDate?: string | null;
     dueDate?: string | null;

apps/console/src/hooks/graph/StateOfApplicabilityGraph.ts

@@ -0,0 +1,235 @@
+import { graphql } from "relay-runtime";
+import type { StateOfApplicabilityGraphPaginatedQuery } from "./__generated__/StateOfApplicabilityGraphPaginatedQuery.graphql";
+import type { StateOfApplicabilityGraphPaginatedFragment$key } from "./__generated__/StateOfApplicabilityGraphPaginatedFragment.graphql";
+import {
+  useMutation,
+  usePaginationFragment,
+  usePreloadedQuery,
+  type PreloadedQuery,
+} from "react-relay";
+import { useConfirm, useToast } from "@probo/ui";
+import type { StateOfApplicabilityGraphDeleteMutation } from "./__generated__/StateOfApplicabilityGraphDeleteMutation.graphql";
+import {
+  promisifyMutation,
+  sprintf,
+  formatError,
+  type GraphQLError,
+} from "@probo/helpers";
+import { useTranslate } from "@probo/i18n";
+
+export const paginatedStateOfApplicabilityQuery = graphql`
+  query StateOfApplicabilityGraphPaginatedQuery($organizationId: ID!) {
+    organization: node(id: $organizationId) {
+      ... on Organization {
+        id
+        ...StateOfApplicabilityGraphPaginatedFragment
+      }
+    }
+  }
+`;
+
+export const paginatedStateOfApplicabilityFragment = graphql`
+  fragment StateOfApplicabilityGraphPaginatedFragment on Organization
+  @refetchable(queryName: "StateOfApplicabilityListQuery")
+  @argumentDefinitions(
+    first: { type: "Int", defaultValue: 50 }
+    order: {
+      type: "StateOfApplicabilityOrder"
+      defaultValue: { direction: DESC, field: CREATED_AT }
+    }
+    after: { type: "CursorKey", defaultValue: null }
+    before: { type: "CursorKey", defaultValue: null }
+    last: { type: "Int", defaultValue: null }
+    filter: { type: "StateOfApplicabilityFilter", defaultValue: { snapshotId: null } }
+  ) {
+    statesOfApplicability(
+      first: $first
+      after: $after
+      last: $last
+      before: $before
+      orderBy: $order
+      filter: $filter
+    ) @connection(key: "StateOfApplicabilityGraphPaginatedQuery_statesOfApplicability") {
+      __id
+      edges {
+        node {
+          id
+          name
+          sourceId
+          snapshotId
+          createdAt
+          updatedAt
+          controlsInfo: controls(first: 0) {
+            totalCount
+          }
+        }
+      }
+    }
+  }
+`;
+
+export function useStateOfApplicabilityQuery(
+  queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>,
+) {
+  const data = usePreloadedQuery(paginatedStateOfApplicabilityQuery, queryRef);
+  const pagination = usePaginationFragment(
+    paginatedStateOfApplicabilityFragment,
+    data.organization as StateOfApplicabilityGraphPaginatedFragment$key,
+  );
+  const statesOfApplicability = pagination.data.statesOfApplicability?.edges.map((edge) => edge.node);
+  return {
+    ...pagination,
+    statesOfApplicability,
+    connectionId: pagination.data.statesOfApplicability.__id,
+  };
+}
+
+export const deleteStateOfApplicabilityMutation = graphql`
+  mutation StateOfApplicabilityGraphDeleteMutation(
+    $input: DeleteStateOfApplicabilityInput!
+    $connections: [ID!]!
+  ) {
+    deleteStateOfApplicability(input: $input) {
+      deletedStateOfApplicabilityId @deleteEdge(connections: $connections)
+    }
+  }
+`;
+
+export const StateOfApplicabilityConnectionKey = "StateOfApplicabilityGraphPaginatedQuery_statesOfApplicability";
+
+export const useDeleteStateOfApplicability = (
+  stateOfApplicability: { id?: string; name?: string },
+  connectionId: string,
+  onSuccess?: () => void,
+) => {
+  const [mutate] = useMutation<StateOfApplicabilityGraphDeleteMutation>(deleteStateOfApplicabilityMutation);
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const { __ } = useTranslate();
+
+  return () => {
+    if (!stateOfApplicability.id || !stateOfApplicability.name) {
+      return alert(__("Failed to delete state of applicability: missing id or name"));
+    }
+    confirm(
+      () =>
+        promisifyMutation(mutate)({
+          variables: {
+            input: {
+              stateOfApplicabilityId: stateOfApplicability.id!,
+            },
+            connections: [connectionId],
+          },
+        })
+          .then(() => {
+            onSuccess?.();
+          })
+          .catch((error) => {
+            toast({
+              title: __("Error"),
+              description: formatError(
+                __("Failed to delete state of applicability"),
+                error as GraphQLError,
+              ),
+              variant: "error",
+            });
+          }),
+      {
+        message: sprintf(
+          __(
+            'This will permanently delete "%s". This action cannot be undone.',
+          ),
+          stateOfApplicability.name,
+        ),
+      },
+    );
+  };
+};
+
+export const createStateOfApplicabilityMutation = graphql`
+  mutation StateOfApplicabilityGraphCreateMutation(
+    $input: CreateStateOfApplicabilityInput!
+    $connections: [ID!]!
+  ) {
+    createStateOfApplicability(input: $input) {
+      stateOfApplicabilityEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          name
+          sourceId
+          snapshotId
+          createdAt
+          updatedAt
+        }
+      }
+    }
+  }
+`;
+
+export const updateStateOfApplicabilityMutation = graphql`
+  mutation StateOfApplicabilityGraphUpdateMutation(
+    $input: UpdateStateOfApplicabilityInput!
+  ) {
+    updateStateOfApplicability(input: $input) {
+      stateOfApplicability {
+        id
+        name
+        sourceId
+        snapshotId
+        createdAt
+        updatedAt
+        owner {
+          id
+          fullName
+        }
+      }
+    }
+  }
+`;
+
+export const stateOfApplicabilityNodeQuery = graphql`
+  query StateOfApplicabilityGraphNodeQuery($stateOfApplicabilityId: ID!) {
+    node(id: $stateOfApplicabilityId) {
+      ... on StateOfApplicability {
+        id
+        name
+        sourceId
+        snapshotId
+        createdAt
+        updatedAt
+        organization {
+          id
+        }
+        owner {
+          id
+          fullName
+        }
+        ...StateOfApplicabilityControlsTabFragment
+      }
+    }
+  }
+`;
+
+export const stateOfApplicabilityForEditQuery = graphql`
+  query StateOfApplicabilityGraphForEditQuery($stateOfApplicabilityId: ID!) {
+    node(id: $stateOfApplicabilityId) {
+      ... on StateOfApplicability {
+        id
+        name
+        controls(first: 1000, orderBy: { field: SECTION_TITLE, direction: ASC }) {
+          edges {
+            node {
+              id
+              sectionTitle
+              name
+              framework {
+                id
+                name
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;

apps/console/src/hooks/graph/__generated__/FrameworkGraphControlNodeQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<54b072cf5a78b17f86e5fc810cac517a>>
+ * @generated SignedSource<<ec1b843d1afb3a82c747b8580b528fda>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -47,6 +47,15 @@ export type FrameworkGraphControlNodeQuery$data = {
       }>;
     };
     readonly name?: string;
+    readonly obligations?: {
+      readonly __id: string;
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly " $fragmentSpreads": FragmentRefs<"LinkedObligationsCardFragment">;
+        };
+      }>;
+    };
     readonly sectionTitle?: string;
     readonly snapshots?: {
       readonly __id: string;
@@ -57,6 +66,15 @@ export type FrameworkGraphControlNodeQuery$data = {
         };
       }>;
     };
+    readonly stateOfApplicabilityControls?: {
+      readonly __id: string;
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly id: string;
+          readonly " $fragmentSpreads": FragmentRefs<"LinkedStatesOfApplicabilityCardFragment">;
+        };
+      }>;
+    };
     readonly status?: ControlStatus;
     readonly " $fragmentSpreads": FragmentRefs<"FrameworkControlDialogFragment">;
   };
@@ -181,14 +199,18 @@ v12 = [
     "value": 100
   }
 ],
-v13 = {
+v13 = [
+  (v2/*: any*/),
+  (v3/*: any*/)
+],
+v14 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
   "name": "state",
   "storageKey": null
 },
-v14 = {
+v15 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
@@ -224,6 +246,49 @@ return {
                 "kind": "FragmentSpread",
                 "name": "FrameworkControlDialogFragment"
               },
+              {
+                "alias": "stateOfApplicabilityControls",
+                "args": null,
+                "concreteType": "StateOfApplicabilityControlConnection",
+                "kind": "LinkedField",
+                "name": "__FrameworkGraphControl_stateOfApplicabilityControls_connection",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "StateOfApplicabilityControlEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "StateOfApplicabilityControl",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v2/*: any*/),
+                          {
+                            "args": null,
+                            "kind": "FragmentSpread",
+                            "name": "LinkedStatesOfApplicabilityCardFragment"
+                          },
+                          (v8/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      (v9/*: any*/)
+                    ],
+                    "storageKey": null
+                  },
+                  (v10/*: any*/),
+                  (v11/*: any*/)
+                ],
+                "storageKey": null
+              },
               {
                 "alias": "measures",
                 "args": null,
@@ -353,6 +418,49 @@ return {
                 ],
                 "storageKey": null
               },
+              {
+                "alias": "obligations",
+                "args": null,
+                "concreteType": "ObligationConnection",
+                "kind": "LinkedField",
+                "name": "__FrameworkGraphControl_obligations_connection",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "ObligationEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "Obligation",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v2/*: any*/),
+                          {
+                            "args": null,
+                            "kind": "FragmentSpread",
+                            "name": "LinkedObligationsCardFragment"
+                          },
+                          (v8/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      (v9/*: any*/)
+                    ],
+                    "storageKey": null
+                  },
+                  (v10/*: any*/),
+                  (v11/*: any*/)
+                ],
+                "storageKey": null
+              },
               {
                 "alias": "snapshots",
                 "args": null,
@@ -431,6 +539,98 @@ return {
               (v5/*: any*/),
               (v6/*: any*/),
               (v7/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "bestPractice",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": (v12/*: any*/),
+                "concreteType": "StateOfApplicabilityControlConnection",
+                "kind": "LinkedField",
+                "name": "stateOfApplicabilityControls",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "StateOfApplicabilityControlEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "StateOfApplicabilityControl",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v2/*: any*/),
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "stateOfApplicabilityId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "controlId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "concreteType": "StateOfApplicability",
+                            "kind": "LinkedField",
+                            "name": "stateOfApplicability",
+                            "plural": false,
+                            "selections": (v13/*: any*/),
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "applicability",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "justification",
+                            "storageKey": null
+                          },
+                          (v8/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      (v9/*: any*/)
+                    ],
+                    "storageKey": null
+                  },
+                  (v10/*: any*/),
+                  (v11/*: any*/)
+                ],
+                "storageKey": "stateOfApplicabilityControls(first:100)"
+              },
+              {
+                "alias": null,
+                "args": (v12/*: any*/),
+                "filters": null,
+                "handle": "connection",
+                "key": "FrameworkGraphControl_stateOfApplicabilityControls",
+                "kind": "LinkedHandle",
+                "name": "stateOfApplicabilityControls"
+              },
               {
                 "alias": null,
                 "args": (v12/*: any*/),
@@ -457,7 +657,7 @@ return {
                         "selections": [
                           (v2/*: any*/),
                           (v3/*: any*/),
-                          (v13/*: any*/),
+                          (v14/*: any*/),
                           (v8/*: any*/)
                         ],
                         "storageKey": null
@@ -512,7 +712,7 @@ return {
                             "name": "title",
                             "storageKey": null
                           },
-                          (v14/*: any*/),
+                          (v15/*: any*/),
                           {
                             "alias": null,
                             "args": null,
@@ -609,8 +809,8 @@ return {
                         "selections": [
                           (v2/*: any*/),
                           (v3/*: any*/),
+                          (v15/*: any*/),
                           (v14/*: any*/),
-                          (v13/*: any*/),
                           {
                             "alias": null,
                             "args": null,
@@ -632,10 +832,7 @@ return {
                             "kind": "LinkedField",
                             "name": "framework",
                             "plural": false,
-                            "selections": [
-                              (v2/*: any*/),
-                              (v3/*: any*/)
-                            ],
+                            "selections": (v13/*: any*/),
                             "storageKey": null
                           },
                           (v8/*: any*/)
@@ -660,6 +857,94 @@ return {
                 "kind": "LinkedHandle",
                 "name": "audits"
               },
+              {
+                "alias": null,
+                "args": (v12/*: any*/),
+                "concreteType": "ObligationConnection",
+                "kind": "LinkedField",
+                "name": "obligations",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "ObligationEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "Obligation",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v2/*: any*/),
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "requirement",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "area",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "source",
+                            "storageKey": null
+                          },
+                          (v6/*: any*/),
+                          {
+                            "alias": null,
+                            "args": null,
+                            "concreteType": "People",
+                            "kind": "LinkedField",
+                            "name": "owner",
+                            "plural": false,
+                            "selections": [
+                              {
+                                "alias": null,
+                                "args": null,
+                                "kind": "ScalarField",
+                                "name": "fullName",
+                                "storageKey": null
+                              },
+                              (v2/*: any*/)
+                            ],
+                            "storageKey": null
+                          },
+                          (v8/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      (v9/*: any*/)
+                    ],
+                    "storageKey": null
+                  },
+                  (v10/*: any*/),
+                  (v11/*: any*/)
+                ],
+                "storageKey": "obligations(first:100)"
+              },
+              {
+                "alias": null,
+                "args": (v12/*: any*/),
+                "filters": null,
+                "handle": "connection",
+                "key": "FrameworkGraphControl_obligations",
+                "kind": "LinkedHandle",
+                "name": "obligations"
+              },
               {
                 "alias": null,
                 "args": (v12/*: any*/),
@@ -694,7 +979,7 @@ return {
                             "name": "type",
                             "storageKey": null
                           },
-                          (v14/*: any*/),
+                          (v15/*: any*/),
                           (v8/*: any*/)
                         ],
                         "storageKey": null
@@ -727,10 +1012,19 @@ return {
     ]
   },
   "params": {
-    "cacheID": "2ce9eb2cbe052019e86b2d0baecfb6f0",
+    "cacheID": "f7773b474bf5f22e9a7075c685839001",
     "id": null,
     "metadata": {
       "connection": [
+        {
+          "count": null,
+          "cursor": null,
+          "direction": "forward",
+          "path": [
+            "node",
+            "stateOfApplicabilityControls"
+          ]
+        },
         {
           "count": null,
           "cursor": null,
@@ -758,6 +1052,15 @@ return {
             "audits"
           ]
         },
+        {
+          "count": null,
+          "cursor": null,
+          "direction": "forward",
+          "path": [
+            "node",
+            "obligations"
+          ]
+        },
         {
           "count": null,
           "cursor": null,
@@ -771,11 +1074,11 @@ return {
     },
     "name": "FrameworkGraphControlNodeQuery",
     "operationKind": "query",
-    "text": "query FrameworkGraphControlNodeQuery(\n  $controlId: ID!\n) {\n  node(id: $controlId) {\n    __typename\n    ... on Control {\n      id\n      name\n      sectionTitle\n      description\n      status\n      exclusionJustification\n      ...FrameworkControlDialogFragment\n      measures(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedMeasuresCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      documents(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedDocumentsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      audits(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedAuditsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      snapshots(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedSnapshotsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n    id\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n}\n\nfragment LinkedAuditsCardFragment on Audit {\n  id\n  name\n  createdAt\n  state\n  validFrom\n  validUntil\n  framework {\n    id\n    name\n  }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n  id\n  title\n  createdAt\n  documentType\n  versions(first: 1) {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n  id\n  name\n  state\n}\n\nfragment LinkedSnapshotsCardFragment on Snapshot {\n  id\n  name\n  description\n  type\n  createdAt\n}\n"
+    "text": "query FrameworkGraphControlNodeQuery(\n  $controlId: ID!\n) {\n  node(id: $controlId) {\n    __typename\n    ... on Control {\n      id\n      name\n      sectionTitle\n      description\n      status\n      exclusionJustification\n      ...FrameworkControlDialogFragment\n      stateOfApplicabilityControls(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedStatesOfApplicabilityCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      measures(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedMeasuresCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      documents(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedDocumentsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      audits(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedAuditsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      obligations(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedObligationsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      snapshots(first: 100) {\n        edges {\n          node {\n            id\n            ...LinkedSnapshotsCardFragment\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n    id\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n  bestPractice\n}\n\nfragment LinkedAuditsCardFragment on Audit {\n  id\n  name\n  createdAt\n  state\n  validFrom\n  validUntil\n  framework {\n    id\n    name\n  }\n}\n\nfragment LinkedDocumentsCardFragment on Document {\n  id\n  title\n  createdAt\n  documentType\n  versions(first: 1) {\n    edges {\n      node {\n        id\n        status\n      }\n    }\n  }\n}\n\nfragment LinkedMeasuresCardFragment on Measure {\n  id\n  name\n  state\n}\n\nfragment LinkedObligationsCardFragment on Obligation {\n  id\n  requirement\n  area\n  source\n  status\n  owner {\n    fullName\n    id\n  }\n}\n\nfragment LinkedSnapshotsCardFragment on Snapshot {\n  id\n  name\n  description\n  type\n  createdAt\n}\n\nfragment LinkedStatesOfApplicabilityCardFragment on StateOfApplicabilityControl {\n  id\n  stateOfApplicabilityId\n  controlId\n  stateOfApplicability {\n    id\n    name\n  }\n  applicability\n  justification\n}\n"
   }
 };
 })();
 
-(node as any).hash = "afc4bbbce8d8b3cd57ac2bf77db58e55";
+(node as any).hash = "b28838e3c3c4cdd68906247d129799c8";
 
 export default node;

apps/console/src/hooks/graph/__generated__/FrameworkGraphNodeQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6fcc115e1ab6df38ede8756968ae7a6a>>
+ * @generated SignedSource<<43528dc19e67fdeca407f5081e6252b9>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -210,6 +210,13 @@ return {
                             "kind": "ScalarField",
                             "name": "exclusionJustification",
                             "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "bestPractice",
+                            "storageKey": null
                           }
                         ],
                         "storageKey": null
@@ -242,12 +249,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "68c09567aff1176075300c645f5d117d",
+    "cacheID": "5af3d5c9f8d466c5d6a78d7bd5da70d1",
     "id": null,
     "metadata": {},
     "name": "FrameworkGraphNodeQuery",
     "operationKind": "query",
-    "text": "query FrameworkGraphNodeQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    ... on Framework {\n      id\n      name\n      ...FrameworkDetailPageFragment\n    }\n    id\n  }\n}\n\nfragment FrameworkDetailPageFragment on Framework {\n  id\n  name\n  description\n  lightLogoURL\n  darkLogoURL\n  organization {\n    name\n    id\n  }\n  controls(first: 250, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n    edges {\n      node {\n        id\n        sectionTitle\n        name\n        status\n        exclusionJustification\n      }\n    }\n  }\n}\n"
+    "text": "query FrameworkGraphNodeQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    ... on Framework {\n      id\n      name\n      ...FrameworkDetailPageFragment\n    }\n    id\n  }\n}\n\nfragment FrameworkDetailPageFragment on Framework {\n  id\n  name\n  description\n  lightLogoURL\n  darkLogoURL\n  organization {\n    name\n    id\n  }\n  controls(first: 250, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n    edges {\n      node {\n        id\n        sectionTitle\n        name\n        status\n        exclusionJustification\n        bestPractice\n      }\n    }\n  }\n}\n"
   }
 };
 })();

apps/console/src/hooks/graph/__generated__/ObligationGraphCreateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<6c659dc34af3bc7107a55d45f49075b5>>
+ * @generated SignedSource<<46f875946badbe73d5c1ab10f442763d>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@
 
 import { ConcreteRequest } from 'relay-runtime';
 export type ObligationStatus = "COMPLIANT" | "NON_COMPLIANT" | "PARTIALLY_COMPLIANT";
+export type ObligationType = "CONTRACTUAL" | "LEGAL";
 export type CreateObligationInput = {
   actionsToBeImplemented?: string | null | undefined;
   area?: string | null | undefined;
@@ -21,6 +22,7 @@ export type CreateObligationInput = {
   requirement?: string | null | undefined;
   source?: string | null | undefined;
   status: ObligationStatus;
+  type: ObligationType;
 };
 export type ObligationGraphCreateMutation$variables = {
   connections: ReadonlyArray<string>;
@@ -44,6 +46,7 @@ export type ObligationGraphCreateMutation$data = {
         readonly requirement: string | null | undefined;
         readonly source: string | null | undefined;
         readonly status: ObligationStatus;
+        readonly type: ObligationType;
       };
     };
   };
@@ -130,6 +133,13 @@ v4 = {
           "name": "regulator",
           "storageKey": null
         },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "type",
+          "storageKey": null
+        },
         {
           "alias": null,
           "args": null,
@@ -249,16 +259,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "76eae037102523c7378b07856332c9ff",
+    "cacheID": "495da8600659a64f5d59ed86a56c8762",
     "id": null,
     "metadata": {},
     "name": "ObligationGraphCreateMutation",
     "operationKind": "mutation",
-    "text": "mutation ObligationGraphCreateMutation(\n  $input: CreateObligationInput!\n) {\n  createObligation(input: $input) {\n    obligationEdge {\n      node {\n        id\n        area\n        source\n        requirement\n        actionsToBeImplemented\n        regulator\n        lastReviewDate\n        dueDate\n        status\n        owner {\n          id\n          fullName\n        }\n        createdAt\n      }\n    }\n  }\n}\n"
+    "text": "mutation ObligationGraphCreateMutation(\n  $input: CreateObligationInput!\n) {\n  createObligation(input: $input) {\n    obligationEdge {\n      node {\n        id\n        area\n        source\n        requirement\n        actionsToBeImplemented\n        regulator\n        type\n        lastReviewDate\n        dueDate\n        status\n        owner {\n          id\n          fullName\n        }\n        createdAt\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "f3d8ddbef3566e26b3fe65543d93d07d";
+(node as any).hash = "e28cc6399325e7288ce7a71d3400acdb";
 
 export default node;

apps/console/src/hooks/graph/__generated__/ObligationGraphNodeQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d1b09bb9cf9c608b8b3ac1c2b55a109a>>
+ * @generated SignedSource<<3542cd7b93f38df062a93a1b9e325ff3>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@
 
 import { ConcreteRequest } from 'relay-runtime';
 export type ObligationStatus = "COMPLIANT" | "NON_COMPLIANT" | "PARTIALLY_COMPLIANT";
+export type ObligationType = "CONTRACTUAL" | "LEGAL";
 export type ObligationGraphNodeQuery$variables = {
   obligationId: string;
 };
@@ -35,6 +36,7 @@ export type ObligationGraphNodeQuery$data = {
     readonly source?: string | null | undefined;
     readonly sourceId?: string | null | undefined;
     readonly status?: ObligationStatus;
+    readonly type?: ObligationType;
     readonly updatedAt?: any;
   };
 };
@@ -118,24 +120,31 @@ v10 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
-  "name": "lastReviewDate",
+  "name": "type",
   "storageKey": null
 },
 v11 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
-  "name": "dueDate",
+  "name": "lastReviewDate",
   "storageKey": null
 },
 v12 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
-  "name": "status",
+  "name": "dueDate",
   "storageKey": null
 },
 v13 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "status",
+  "storageKey": null
+},
+v14 = {
   "alias": null,
   "args": null,
   "concreteType": "People",
@@ -154,7 +163,7 @@ v13 = {
   ],
   "storageKey": null
 },
-v14 = {
+v15 = {
   "alias": null,
   "args": null,
   "concreteType": "Organization",
@@ -173,14 +182,14 @@ v14 = {
   ],
   "storageKey": null
 },
-v15 = {
+v16 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
   "name": "createdAt",
   "storageKey": null
 },
-v16 = {
+v17 = {
   "alias": null,
   "args": null,
   "kind": "ScalarField",
@@ -219,7 +228,8 @@ return {
               (v13/*: any*/),
               (v14/*: any*/),
               (v15/*: any*/),
-              (v16/*: any*/)
+              (v16/*: any*/),
+              (v17/*: any*/)
             ],
             "type": "Obligation",
             "abstractKey": null
@@ -269,7 +279,8 @@ return {
               (v13/*: any*/),
               (v14/*: any*/),
               (v15/*: any*/),
-              (v16/*: any*/)
+              (v16/*: any*/),
+              (v17/*: any*/)
             ],
             "type": "Obligation",
             "abstractKey": null
@@ -280,16 +291,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "6fd1c9d6e9f9a5baa60e4d270fc16db7",
+    "cacheID": "049eff8ed7a7476c04d09b64c061c3a6",
     "id": null,
     "metadata": {},
     "name": "ObligationGraphNodeQuery",
     "operationKind": "query",
-    "text": "query ObligationGraphNodeQuery(\n  $obligationId: ID!\n) {\n  node(id: $obligationId) {\n    __typename\n    ... on Obligation {\n      id\n      snapshotId\n      sourceId\n      area\n      source\n      requirement\n      actionsToBeImplemented\n      regulator\n      lastReviewDate\n      dueDate\n      status\n      owner {\n        id\n        fullName\n      }\n      organization {\n        id\n        name\n      }\n      createdAt\n      updatedAt\n    }\n    id\n  }\n}\n"
+    "text": "query ObligationGraphNodeQuery(\n  $obligationId: ID!\n) {\n  node(id: $obligationId) {\n    __typename\n    ... on Obligation {\n      id\n      snapshotId\n      sourceId\n      area\n      source\n      requirement\n      actionsToBeImplemented\n      regulator\n      type\n      lastReviewDate\n      dueDate\n      status\n      owner {\n        id\n        fullName\n      }\n      organization {\n        id\n        name\n      }\n      createdAt\n      updatedAt\n    }\n    id\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "ddefa1f2514f429a8ff174646bccf254";
+(node as any).hash = "c50090bdd31fc24e0fdb067677999f77";
 
 export default node;

apps/console/src/hooks/graph/__generated__/ObligationGraphUpdateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2fb713ad39d2976a25e4fee57edec2f3>>
+ * @generated SignedSource<<879c7bec9540c7d9e46eecb2fd5243d7>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -10,6 +10,7 @@
 
 import { ConcreteRequest } from 'relay-runtime';
 export type ObligationStatus = "COMPLIANT" | "NON_COMPLIANT" | "PARTIALLY_COMPLIANT";
+export type ObligationType = "CONTRACTUAL" | "LEGAL";
 export type UpdateObligationInput = {
   actionsToBeImplemented?: string | null | undefined;
   area?: string | null | undefined;
@@ -21,6 +22,7 @@ export type UpdateObligationInput = {
   requirement?: string | null | undefined;
   source?: string | null | undefined;
   status?: ObligationStatus | null | undefined;
+  type?: ObligationType | null | undefined;
 };
 export type ObligationGraphUpdateMutation$variables = {
   input: UpdateObligationInput;
@@ -41,6 +43,7 @@ export type ObligationGraphUpdateMutation$data = {
       readonly requirement: string | null | undefined;
       readonly source: string | null | undefined;
       readonly status: ObligationStatus;
+      readonly type: ObligationType;
       readonly updatedAt: any;
     };
   };
@@ -124,6 +127,13 @@ v2 = [
             "name": "regulator",
             "storageKey": null
           },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "type",
+            "storageKey": null
+          },
           {
             "alias": null,
             "args": null,
@@ -196,16 +206,16 @@ return {
     "selections": (v2/*: any*/)
   },
   "params": {
-    "cacheID": "e42654b0cfd6ebeb8c78e8ec2f62c9c7",
+    "cacheID": "f9c2c73fd39c2d25eb6aa8d9e6670652",
     "id": null,
     "metadata": {},
     "name": "ObligationGraphUpdateMutation",
     "operationKind": "mutation",
-    "text": "mutation ObligationGraphUpdateMutation(\n  $input: UpdateObligationInput!\n) {\n  updateObligation(input: $input) {\n    obligation {\n      id\n      area\n      source\n      requirement\n      actionsToBeImplemented\n      regulator\n      lastReviewDate\n      dueDate\n      status\n      owner {\n        id\n        fullName\n      }\n      updatedAt\n    }\n  }\n}\n"
+    "text": "mutation ObligationGraphUpdateMutation(\n  $input: UpdateObligationInput!\n) {\n  updateObligation(input: $input) {\n    obligation {\n      id\n      area\n      source\n      requirement\n      actionsToBeImplemented\n      regulator\n      type\n      lastReviewDate\n      dueDate\n      status\n      owner {\n        id\n        fullName\n      }\n      updatedAt\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "68013ca15f0e4eaaa0b1ef877b4f528c";
+(node as any).hash = "07663daac0c8341a570a0bf3a41c8b77";
 
 export default node;

apps/console/src/hooks/graph/__generated__/SnapshotGraphCreateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<11dd6f7de6693a626306b674bb8cc4f0>>
+ * @generated SignedSource<<2307fb5807f0d42458650cfaf8ebdbba>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 export type CreateSnapshotInput = {
   description?: string | null | undefined;
   name: string;

apps/console/src/hooks/graph/__generated__/SnapshotGraphNodeQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d6dc9bf5a6c36f140bb864def22c0134>>
+ * @generated SignedSource<<0b5ef79fa213c96a316a4e0a94afade8>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 export type SnapshotGraphNodeQuery$variables = {
   snapshotId: string;
 };

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphCreateMutation.graphql.ts

@@ -0,0 +1,200 @@
+/**
+ * @generated SignedSource<<3a91be997803d4a28d0db40aebe53f25>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreateStateOfApplicabilityInput = {
+  name: string;
+  organizationId: string;
+  ownerId: string;
+};
+export type StateOfApplicabilityGraphCreateMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: CreateStateOfApplicabilityInput;
+};
+export type StateOfApplicabilityGraphCreateMutation$data = {
+  readonly createStateOfApplicability: {
+    readonly stateOfApplicabilityEdge: {
+      readonly node: {
+        readonly createdAt: any;
+        readonly id: string;
+        readonly name: string;
+        readonly snapshotId: string | null | undefined;
+        readonly sourceId: string | null | undefined;
+        readonly updatedAt: any;
+      };
+    };
+  };
+};
+export type StateOfApplicabilityGraphCreateMutation = {
+  response: StateOfApplicabilityGraphCreateMutation$data;
+  variables: StateOfApplicabilityGraphCreateMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "StateOfApplicabilityEdge",
+  "kind": "LinkedField",
+  "name": "stateOfApplicabilityEdge",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "StateOfApplicability",
+      "kind": "LinkedField",
+      "name": "node",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "sourceId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "snapshotId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "createdAt",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "updatedAt",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphCreateMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicability",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphCreateMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicability",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "stateOfApplicabilityEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "c1a3721f591bc17ed455a326eb9edead",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphCreateMutation",
+    "operationKind": "mutation",
+    "text": "mutation StateOfApplicabilityGraphCreateMutation(\n  $input: CreateStateOfApplicabilityInput!\n) {\n  createStateOfApplicability(input: $input) {\n    stateOfApplicabilityEdge {\n      node {\n        id\n        name\n        sourceId\n        snapshotId\n        createdAt\n        updatedAt\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "294d4fe89f8cbbbb4b8170a46dd3cd7a";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphDeleteMutation.graphql.ts

@@ -0,0 +1,132 @@
+/**
+ * @generated SignedSource<<deb6f38f36dc011d0fc4fc060303a57a>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteStateOfApplicabilityInput = {
+  stateOfApplicabilityId: string;
+};
+export type StateOfApplicabilityGraphDeleteMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: DeleteStateOfApplicabilityInput;
+};
+export type StateOfApplicabilityGraphDeleteMutation$data = {
+  readonly deleteStateOfApplicability: {
+    readonly deletedStateOfApplicabilityId: string;
+  };
+};
+export type StateOfApplicabilityGraphDeleteMutation = {
+  response: StateOfApplicabilityGraphDeleteMutation$data;
+  variables: StateOfApplicabilityGraphDeleteMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedStateOfApplicabilityId",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphDeleteMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteStateOfApplicabilityPayload",
+        "kind": "LinkedField",
+        "name": "deleteStateOfApplicability",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphDeleteMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteStateOfApplicabilityPayload",
+        "kind": "LinkedField",
+        "name": "deleteStateOfApplicability",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "deleteEdge",
+            "key": "",
+            "kind": "ScalarHandle",
+            "name": "deletedStateOfApplicabilityId",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "197a2ed2b48d43372e16deae6e9b98c2",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphDeleteMutation",
+    "operationKind": "mutation",
+    "text": "mutation StateOfApplicabilityGraphDeleteMutation(\n  $input: DeleteStateOfApplicabilityInput!\n) {\n  deleteStateOfApplicability(input: $input) {\n    deletedStateOfApplicabilityId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "92ec928d4ad0fe7ff4ae78ad9f1f329a";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphForEditQuery.graphql.ts

@@ -0,0 +1,218 @@
+/**
+ * @generated SignedSource<<9e7f481aa8c95332bc03c3974a6752f8>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type StateOfApplicabilityGraphForEditQuery$variables = {
+  stateOfApplicabilityId: string;
+};
+export type StateOfApplicabilityGraphForEditQuery$data = {
+  readonly node: {
+    readonly controls?: {
+      readonly edges: ReadonlyArray<{
+        readonly node: {
+          readonly framework: {
+            readonly id: string;
+            readonly name: string;
+          };
+          readonly id: string;
+          readonly name: string;
+          readonly sectionTitle: string;
+        };
+      }>;
+    };
+    readonly id?: string;
+    readonly name?: string;
+  };
+};
+export type StateOfApplicabilityGraphForEditQuery = {
+  response: StateOfApplicabilityGraphForEditQuery$data;
+  variables: StateOfApplicabilityGraphForEditQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "stateOfApplicabilityId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "stateOfApplicabilityId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "name",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": [
+    {
+      "kind": "Literal",
+      "name": "first",
+      "value": 1000
+    },
+    {
+      "kind": "Literal",
+      "name": "orderBy",
+      "value": {
+        "direction": "ASC",
+        "field": "SECTION_TITLE"
+      }
+    }
+  ],
+  "concreteType": "ControlConnection",
+  "kind": "LinkedField",
+  "name": "controls",
+  "plural": false,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "ControlEdge",
+      "kind": "LinkedField",
+      "name": "edges",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "Control",
+          "kind": "LinkedField",
+          "name": "node",
+          "plural": false,
+          "selections": [
+            (v2/*: any*/),
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "sectionTitle",
+              "storageKey": null
+            },
+            (v3/*: any*/),
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "Framework",
+              "kind": "LinkedField",
+              "name": "framework",
+              "plural": false,
+              "selections": [
+                (v2/*: any*/),
+                (v3/*: any*/)
+              ],
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "storageKey": "controls(first:1000,orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphForEditQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/),
+              (v4/*: any*/)
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphForEditQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v3/*: any*/),
+              (v4/*: any*/)
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "b6b5490aa177e6e7e8339060eac14a9c",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphForEditQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityGraphForEditQuery(\n  $stateOfApplicabilityId: ID!\n) {\n  node(id: $stateOfApplicabilityId) {\n    __typename\n    ... on StateOfApplicability {\n      id\n      name\n      controls(first: 1000, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n        edges {\n          node {\n            id\n            sectionTitle\n            name\n            framework {\n              id\n              name\n            }\n          }\n        }\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e89010d6f8d66b9df856280a59d5f0c8";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql.ts

@@ -0,0 +1,343 @@
+/**
+ * @generated SignedSource<<d96c71d40860ec6fc2e2ac8a5ab992f8>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type StateOfApplicabilityGraphNodeQuery$variables = {
+  stateOfApplicabilityId: string;
+};
+export type StateOfApplicabilityGraphNodeQuery$data = {
+  readonly node: {
+    readonly createdAt?: any;
+    readonly id?: string;
+    readonly name?: string;
+    readonly organization?: {
+      readonly id: string;
+    } | null | undefined;
+    readonly owner?: {
+      readonly fullName: string;
+      readonly id: string;
+    };
+    readonly snapshotId?: string | null | undefined;
+    readonly sourceId?: string | null | undefined;
+    readonly updatedAt?: any;
+    readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityControlsTabFragment">;
+  };
+};
+export type StateOfApplicabilityGraphNodeQuery = {
+  response: StateOfApplicabilityGraphNodeQuery$data;
+  variables: StateOfApplicabilityGraphNodeQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "stateOfApplicabilityId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "stateOfApplicabilityId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "name",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "sourceId",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "snapshotId",
+  "storageKey": null
+},
+v6 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "createdAt",
+  "storageKey": null
+},
+v7 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "updatedAt",
+  "storageKey": null
+},
+v8 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "Organization",
+  "kind": "LinkedField",
+  "name": "organization",
+  "plural": false,
+  "selections": [
+    (v2/*: any*/)
+  ],
+  "storageKey": null
+},
+v9 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "People",
+  "kind": "LinkedField",
+  "name": "owner",
+  "plural": false,
+  "selections": [
+    (v2/*: any*/),
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "fullName",
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphNodeQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/),
+              (v4/*: any*/),
+              (v5/*: any*/),
+              (v6/*: any*/),
+              (v7/*: any*/),
+              (v8/*: any*/),
+              (v9/*: any*/),
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "StateOfApplicabilityControlsTabFragment"
+              }
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphNodeQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v3/*: any*/),
+              (v4/*: any*/),
+              (v5/*: any*/),
+              (v6/*: any*/),
+              (v7/*: any*/),
+              (v8/*: any*/),
+              (v9/*: any*/),
+              {
+                "alias": "controlsInfo",
+                "args": [
+                  {
+                    "kind": "Literal",
+                    "name": "first",
+                    "value": 0
+                  }
+                ],
+                "concreteType": "ControlConnection",
+                "kind": "LinkedField",
+                "name": "controls",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "totalCount",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": "controls(first:0)"
+              },
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "AvailableStateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "availableControls",
+                "plural": true,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "controlId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "sectionTitle",
+                    "storageKey": null
+                  },
+                  (v3/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "frameworkId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "frameworkName",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "organizationId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "stateOfApplicabilityId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "applicability",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "justification",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "bestPractice",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "regulatory",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "contractual",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "riskAssessment",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "2c2c6535c53d2073bd41b39771d1afd9",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphNodeQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityGraphNodeQuery(\n  $stateOfApplicabilityId: ID!\n) {\n  node(id: $stateOfApplicabilityId) {\n    __typename\n    ... on StateOfApplicability {\n      id\n      name\n      sourceId\n      snapshotId\n      createdAt\n      updatedAt\n      organization {\n        id\n      }\n      owner {\n        id\n        fullName\n      }\n      ...StateOfApplicabilityControlsTabFragment\n    }\n    id\n  }\n}\n\nfragment StateOfApplicabilityControlsTabFragment on StateOfApplicability {\n  id\n  controlsInfo: controls(first: 0) {\n    totalCount\n  }\n  availableControls {\n    controlId\n    sectionTitle\n    name\n    frameworkId\n    frameworkName\n    organizationId\n    stateOfApplicabilityId\n    applicability\n    justification\n    bestPractice\n    regulatory\n    contractual\n    riskAssessment\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "88e882f3c0f529cc7224eb19a91191cf";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedFragment.graphql.ts

@@ -0,0 +1,301 @@
+/**
+ * @generated SignedSource<<28b9e5609f5d7c082c209bf839533d45>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type StateOfApplicabilityGraphPaginatedFragment$data = {
+  readonly id: string;
+  readonly statesOfApplicability: {
+    readonly __id: string;
+    readonly edges: ReadonlyArray<{
+      readonly node: {
+        readonly controlsInfo: {
+          readonly totalCount: number;
+        };
+        readonly createdAt: any;
+        readonly id: string;
+        readonly name: string;
+        readonly snapshotId: string | null | undefined;
+        readonly sourceId: string | null | undefined;
+        readonly updatedAt: any;
+      };
+    }>;
+  };
+  readonly " $fragmentType": "StateOfApplicabilityGraphPaginatedFragment";
+};
+export type StateOfApplicabilityGraphPaginatedFragment$key = {
+  readonly " $data"?: StateOfApplicabilityGraphPaginatedFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityGraphPaginatedFragment">;
+};
+
+import StateOfApplicabilityListQuery_graphql from './StateOfApplicabilityListQuery.graphql';
+
+const node: ReaderFragment = (function(){
+var v0 = [
+  "statesOfApplicability"
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "argumentDefinitions": [
+    {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "after"
+    },
+    {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "before"
+    },
+    {
+      "defaultValue": {
+        "snapshotId": null
+      },
+      "kind": "LocalArgument",
+      "name": "filter"
+    },
+    {
+      "defaultValue": 50,
+      "kind": "LocalArgument",
+      "name": "first"
+    },
+    {
+      "defaultValue": null,
+      "kind": "LocalArgument",
+      "name": "last"
+    },
+    {
+      "defaultValue": {
+        "direction": "DESC",
+        "field": "CREATED_AT"
+      },
+      "kind": "LocalArgument",
+      "name": "order"
+    }
+  ],
+  "kind": "Fragment",
+  "metadata": {
+    "connection": [
+      {
+        "count": null,
+        "cursor": null,
+        "direction": "bidirectional",
+        "path": (v0/*: any*/)
+      }
+    ],
+    "refetch": {
+      "connection": {
+        "forward": {
+          "count": "first",
+          "cursor": "after"
+        },
+        "backward": {
+          "count": "last",
+          "cursor": "before"
+        },
+        "path": (v0/*: any*/)
+      },
+      "fragmentPathInResult": [
+        "node"
+      ],
+      "operation": StateOfApplicabilityListQuery_graphql,
+      "identifierInfo": {
+        "identifierField": "id",
+        "identifierQueryVariableName": "id"
+      }
+    }
+  },
+  "name": "StateOfApplicabilityGraphPaginatedFragment",
+  "selections": [
+    {
+      "alias": "statesOfApplicability",
+      "args": [
+        {
+          "kind": "Variable",
+          "name": "filter",
+          "variableName": "filter"
+        },
+        {
+          "kind": "Variable",
+          "name": "orderBy",
+          "variableName": "order"
+        }
+      ],
+      "concreteType": "StateOfApplicabilityConnection",
+      "kind": "LinkedField",
+      "name": "__StateOfApplicabilityGraphPaginatedQuery_statesOfApplicability_connection",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "StateOfApplicabilityEdge",
+          "kind": "LinkedField",
+          "name": "edges",
+          "plural": true,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "concreteType": "StateOfApplicability",
+              "kind": "LinkedField",
+              "name": "node",
+              "plural": false,
+              "selections": [
+                (v1/*: any*/),
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "name",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "sourceId",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "snapshotId",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "createdAt",
+                  "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "updatedAt",
+                  "storageKey": null
+                },
+                {
+                  "alias": "controlsInfo",
+                  "args": [
+                    {
+                      "kind": "Literal",
+                      "name": "first",
+                      "value": 0
+                    }
+                  ],
+                  "concreteType": "ControlConnection",
+                  "kind": "LinkedField",
+                  "name": "controls",
+                  "plural": false,
+                  "selections": [
+                    {
+                      "alias": null,
+                      "args": null,
+                      "kind": "ScalarField",
+                      "name": "totalCount",
+                      "storageKey": null
+                    }
+                  ],
+                  "storageKey": "controls(first:0)"
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "__typename",
+                  "storageKey": null
+                }
+              ],
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "cursor",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "concreteType": "PageInfo",
+          "kind": "LinkedField",
+          "name": "pageInfo",
+          "plural": false,
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "endCursor",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "hasNextPage",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "hasPreviousPage",
+              "storageKey": null
+            },
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "startCursor",
+              "storageKey": null
+            }
+          ],
+          "storageKey": null
+        },
+        {
+          "kind": "ClientExtension",
+          "selections": [
+            {
+              "alias": null,
+              "args": null,
+              "kind": "ScalarField",
+              "name": "__id",
+              "storageKey": null
+            }
+          ]
+        }
+      ],
+      "storageKey": null
+    },
+    (v1/*: any*/)
+  ],
+  "type": "Organization",
+  "abstractKey": null
+};
+})();
+
+(node as any).hash = "895fc79e61b95bf83997e3d5bcc7f367";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedQuery.graphql.ts

@@ -0,0 +1,318 @@
+/**
+ * @generated SignedSource<<1c22107bf5691e7764aa30352d99631e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type StateOfApplicabilityGraphPaginatedQuery$variables = {
+  organizationId: string;
+};
+export type StateOfApplicabilityGraphPaginatedQuery$data = {
+  readonly organization: {
+    readonly id?: string;
+    readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityGraphPaginatedFragment">;
+  };
+};
+export type StateOfApplicabilityGraphPaginatedQuery = {
+  response: StateOfApplicabilityGraphPaginatedQuery$data;
+  variables: StateOfApplicabilityGraphPaginatedQuery$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": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "__typename",
+  "storageKey": null
+},
+v4 = [
+  {
+    "kind": "Literal",
+    "name": "filter",
+    "value": {
+      "snapshotId": null
+    }
+  },
+  {
+    "kind": "Literal",
+    "name": "first",
+    "value": 50
+  },
+  {
+    "kind": "Literal",
+    "name": "orderBy",
+    "value": {
+      "direction": "DESC",
+      "field": "CREATED_AT"
+    }
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphPaginatedQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              {
+                "args": null,
+                "kind": "FragmentSpread",
+                "name": "StateOfApplicabilityGraphPaginatedFragment"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphPaginatedQuery",
+    "selections": [
+      {
+        "alias": "organization",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": null,
+                "args": (v4/*: any*/),
+                "concreteType": "StateOfApplicabilityConnection",
+                "kind": "LinkedField",
+                "name": "statesOfApplicability",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "StateOfApplicabilityEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "StateOfApplicability",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v2/*: any*/),
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "name",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "sourceId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "snapshotId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "createdAt",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "updatedAt",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": "controlsInfo",
+                            "args": [
+                              {
+                                "kind": "Literal",
+                                "name": "first",
+                                "value": 0
+                              }
+                            ],
+                            "concreteType": "ControlConnection",
+                            "kind": "LinkedField",
+                            "name": "controls",
+                            "plural": false,
+                            "selections": [
+                              {
+                                "alias": null,
+                                "args": null,
+                                "kind": "ScalarField",
+                                "name": "totalCount",
+                                "storageKey": null
+                              }
+                            ],
+                            "storageKey": "controls(first:0)"
+                          },
+                          (v3/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "cursor",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "PageInfo",
+                    "kind": "LinkedField",
+                    "name": "pageInfo",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "endCursor",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "hasNextPage",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "hasPreviousPage",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "startCursor",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ClientExtension",
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "__id",
+                        "storageKey": null
+                      }
+                    ]
+                  }
+                ],
+                "storageKey": "statesOfApplicability(filter:{\"snapshotId\":null},first:50,orderBy:{\"direction\":\"DESC\",\"field\":\"CREATED_AT\"})"
+              },
+              {
+                "alias": null,
+                "args": (v4/*: any*/),
+                "filters": [
+                  "orderBy",
+                  "filter"
+                ],
+                "handle": "connection",
+                "key": "StateOfApplicabilityGraphPaginatedQuery_statesOfApplicability",
+                "kind": "LinkedHandle",
+                "name": "statesOfApplicability"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "c5f5cb61622ba5e4309521002c23a530",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphPaginatedQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityGraphPaginatedQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    ... on Organization {\n      id\n      ...StateOfApplicabilityGraphPaginatedFragment\n    }\n    id\n  }\n}\n\nfragment StateOfApplicabilityGraphPaginatedFragment on Organization {\n  statesOfApplicability(first: 50, orderBy: {direction: DESC, field: CREATED_AT}, filter: {snapshotId: null}) {\n    edges {\n      node {\n        id\n        name\n        sourceId\n        snapshotId\n        createdAt\n        updatedAt\n        controlsInfo: controls(first: 0) {\n          totalCount\n        }\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n  id\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e5eb3f251055f7dd34f7af30251226ca";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityGraphUpdateMutation.graphql.ts

@@ -0,0 +1,171 @@
+/**
+ * @generated SignedSource<<fe37fa58e9c374383c4f59dac08aed39>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateStateOfApplicabilityInput = {
+  id: string;
+  name?: string | null | undefined;
+  ownerId?: string | null | undefined;
+};
+export type StateOfApplicabilityGraphUpdateMutation$variables = {
+  input: UpdateStateOfApplicabilityInput;
+};
+export type StateOfApplicabilityGraphUpdateMutation$data = {
+  readonly updateStateOfApplicability: {
+    readonly stateOfApplicability: {
+      readonly createdAt: any;
+      readonly id: string;
+      readonly name: string;
+      readonly owner: {
+        readonly fullName: string;
+        readonly id: string;
+      };
+      readonly snapshotId: string | null | undefined;
+      readonly sourceId: string | null | undefined;
+      readonly updatedAt: any;
+    };
+  };
+};
+export type StateOfApplicabilityGraphUpdateMutation = {
+  response: StateOfApplicabilityGraphUpdateMutation$data;
+  variables: StateOfApplicabilityGraphUpdateMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v2 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateStateOfApplicabilityPayload",
+    "kind": "LinkedField",
+    "name": "updateStateOfApplicability",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "StateOfApplicability",
+        "kind": "LinkedField",
+        "name": "stateOfApplicability",
+        "plural": false,
+        "selections": [
+          (v1/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "name",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "sourceId",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "snapshotId",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "updatedAt",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "People",
+            "kind": "LinkedField",
+            "name": "owner",
+            "plural": false,
+            "selections": [
+              (v1/*: any*/),
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "fullName",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityGraphUpdateMutation",
+    "selections": (v2/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityGraphUpdateMutation",
+    "selections": (v2/*: any*/)
+  },
+  "params": {
+    "cacheID": "609bd562b84162f2807ee89b3c3273aa",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityGraphUpdateMutation",
+    "operationKind": "mutation",
+    "text": "mutation StateOfApplicabilityGraphUpdateMutation(\n  $input: UpdateStateOfApplicabilityInput!\n) {\n  updateStateOfApplicability(input: $input) {\n    stateOfApplicability {\n      id\n      name\n      sourceId\n      snapshotId\n      createdAt\n      updatedAt\n      owner {\n        id\n        fullName\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e8810210629ef7fad113616c06f141ee";
+
+export default node;

apps/console/src/hooks/graph/__generated__/StateOfApplicabilityListQuery.graphql.ts

@@ -0,0 +1,399 @@
+/**
+ * @generated SignedSource<<e0d47d3fdb15b30f904396b7bcd1328f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type OrderDirection = "ASC" | "DESC";
+export type StateOfApplicabilityOrderField = "CREATED_AT" | "NAME";
+export type StateOfApplicabilityFilter = {
+  snapshotId?: string | null | undefined;
+};
+export type StateOfApplicabilityOrder = {
+  direction: OrderDirection;
+  field: StateOfApplicabilityOrderField;
+};
+export type StateOfApplicabilityListQuery$variables = {
+  after?: any | null | undefined;
+  before?: any | null | undefined;
+  filter?: StateOfApplicabilityFilter | null | undefined;
+  first?: number | null | undefined;
+  id: string;
+  last?: number | null | undefined;
+  order?: StateOfApplicabilityOrder | null | undefined;
+};
+export type StateOfApplicabilityListQuery$data = {
+  readonly node: {
+    readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityGraphPaginatedFragment">;
+  };
+};
+export type StateOfApplicabilityListQuery = {
+  response: StateOfApplicabilityListQuery$data;
+  variables: StateOfApplicabilityListQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "after"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "before"
+},
+v2 = {
+  "defaultValue": {
+    "snapshotId": null
+  },
+  "kind": "LocalArgument",
+  "name": "filter"
+},
+v3 = {
+  "defaultValue": 50,
+  "kind": "LocalArgument",
+  "name": "first"
+},
+v4 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "id"
+},
+v5 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "last"
+},
+v6 = {
+  "defaultValue": {
+    "direction": "DESC",
+    "field": "CREATED_AT"
+  },
+  "kind": "LocalArgument",
+  "name": "order"
+},
+v7 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "id"
+  }
+],
+v8 = {
+  "kind": "Variable",
+  "name": "after",
+  "variableName": "after"
+},
+v9 = {
+  "kind": "Variable",
+  "name": "before",
+  "variableName": "before"
+},
+v10 = {
+  "kind": "Variable",
+  "name": "filter",
+  "variableName": "filter"
+},
+v11 = {
+  "kind": "Variable",
+  "name": "first",
+  "variableName": "first"
+},
+v12 = {
+  "kind": "Variable",
+  "name": "last",
+  "variableName": "last"
+},
+v13 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "__typename",
+  "storageKey": null
+},
+v14 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v15 = [
+  (v8/*: any*/),
+  (v9/*: any*/),
+  (v10/*: any*/),
+  (v11/*: any*/),
+  (v12/*: any*/),
+  {
+    "kind": "Variable",
+    "name": "orderBy",
+    "variableName": "order"
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/),
+      (v2/*: any*/),
+      (v3/*: any*/),
+      (v4/*: any*/),
+      (v5/*: any*/),
+      (v6/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityListQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v7/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "args": [
+              (v8/*: any*/),
+              (v9/*: any*/),
+              (v10/*: any*/),
+              (v11/*: any*/),
+              (v12/*: any*/),
+              {
+                "kind": "Variable",
+                "name": "order",
+                "variableName": "order"
+              }
+            ],
+            "kind": "FragmentSpread",
+            "name": "StateOfApplicabilityGraphPaginatedFragment"
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/),
+      (v2/*: any*/),
+      (v3/*: any*/),
+      (v5/*: any*/),
+      (v6/*: any*/),
+      (v4/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "StateOfApplicabilityListQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v7/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          (v13/*: any*/),
+          (v14/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": null,
+                "args": (v15/*: any*/),
+                "concreteType": "StateOfApplicabilityConnection",
+                "kind": "LinkedField",
+                "name": "statesOfApplicability",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "StateOfApplicabilityEdge",
+                    "kind": "LinkedField",
+                    "name": "edges",
+                    "plural": true,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "concreteType": "StateOfApplicability",
+                        "kind": "LinkedField",
+                        "name": "node",
+                        "plural": false,
+                        "selections": [
+                          (v14/*: any*/),
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "name",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "sourceId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "snapshotId",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "createdAt",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": null,
+                            "args": null,
+                            "kind": "ScalarField",
+                            "name": "updatedAt",
+                            "storageKey": null
+                          },
+                          {
+                            "alias": "controlsInfo",
+                            "args": [
+                              {
+                                "kind": "Literal",
+                                "name": "first",
+                                "value": 0
+                              }
+                            ],
+                            "concreteType": "ControlConnection",
+                            "kind": "LinkedField",
+                            "name": "controls",
+                            "plural": false,
+                            "selections": [
+                              {
+                                "alias": null,
+                                "args": null,
+                                "kind": "ScalarField",
+                                "name": "totalCount",
+                                "storageKey": null
+                              }
+                            ],
+                            "storageKey": "controls(first:0)"
+                          },
+                          (v13/*: any*/)
+                        ],
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "cursor",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "PageInfo",
+                    "kind": "LinkedField",
+                    "name": "pageInfo",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "endCursor",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "hasNextPage",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "hasPreviousPage",
+                        "storageKey": null
+                      },
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "startCursor",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  },
+                  {
+                    "kind": "ClientExtension",
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "__id",
+                        "storageKey": null
+                      }
+                    ]
+                  }
+                ],
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": (v15/*: any*/),
+                "filters": [
+                  "orderBy",
+                  "filter"
+                ],
+                "handle": "connection",
+                "key": "StateOfApplicabilityGraphPaginatedQuery_statesOfApplicability",
+                "kind": "LinkedHandle",
+                "name": "statesOfApplicability"
+              }
+            ],
+            "type": "Organization",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "d3227559321509a2a525848a0e26e20b",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityListQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityListQuery(\n  $after: CursorKey = null\n  $before: CursorKey = null\n  $filter: StateOfApplicabilityFilter = {snapshotId: null}\n  $first: Int = 50\n  $last: Int = null\n  $order: StateOfApplicabilityOrder = {direction: DESC, field: CREATED_AT}\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...StateOfApplicabilityGraphPaginatedFragment_4cFWzS\n    id\n  }\n}\n\nfragment StateOfApplicabilityGraphPaginatedFragment_4cFWzS on Organization {\n  statesOfApplicability(first: $first, after: $after, last: $last, before: $before, orderBy: $order, filter: $filter) {\n    edges {\n      node {\n        id\n        name\n        sourceId\n        snapshotId\n        createdAt\n        updatedAt\n        controlsInfo: controls(first: 0) {\n          totalCount\n        }\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n      hasPreviousPage\n      startCursor\n    }\n  }\n  id\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "895fc79e61b95bf83997e3d5bcc7f367";
+
+export default node;

apps/console/src/layouts/MainLayout.tsx

@@ -22,6 +22,7 @@ import {
   IconInboxEmpty,
   IconKey,
   IconListStack,
+  IconPageCheck,
   IconLock,
   IconMagnifyingGlass,
   IconMedal,
@@ -231,6 +232,13 @@ function MainLayoutContent({
               to={`${prefix}/rights-requests`}
             />
           )}
+          {isAuthorized("Organization", "listStatesOfApplicability") && (
+            <SidebarItem
+              label={__("States of Applicability")}
+              icon={IconPageCheck}
+              to={`${prefix}/states-of-applicability`}
+            />
+          )}
           {isAuthorized("Organization", "listSnapshots") && (
             <SidebarItem
               label={__("Snapshots")}

apps/console/src/pages/organizations/frameworks/FrameworkControlPage.tsx

@@ -21,7 +21,9 @@ import { useNavigate, useOutletContext } from "react-router";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { LinkedDocumentsCard } from "/components/documents/LinkedDocumentsCard";
 import { LinkedAuditsCard } from "/components/audits/LinkedAuditsCard";
+import { LinkedObligationsCard } from "/components/obligations/LinkedObligationsCard";
 import { LinkedSnapshotsCard } from "/components/snapshots/LinkedSnapshotsCard";
+import { LinkedStatesOfApplicabilityCard } from "/components/states-of-applicability/LinkedStatesOfApplicabilityCard";
 import { FrameworkControlDialog } from "./dialogs/FrameworkControlDialog";
 import { promisifyMutation } from "@probo/helpers";
 import type { FrameworkGraphControlNodeQuery } from "/hooks/graph/__generated__/FrameworkGraphControlNodeQuery.graphql";
@@ -30,6 +32,35 @@ import type { FrameworkDetailPageFragment$data } from "./__generated__/Framework
 import { use } from "react";
 import { PermissionsContext } from "/providers/PermissionsContext";
 
+const attachStateOfApplicabilityMutation = graphql`
+  mutation FrameworkControlPageAttachStateOfApplicabilityMutation(
+    $input: CreateStateOfApplicabilityControlMappingInput!
+    $connections: [ID!]!
+  ) {
+    createStateOfApplicabilityControlMapping(input: $input) {
+      stateOfApplicabilityControlEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          ...LinkedStatesOfApplicabilityCardFragment
+        }
+      }
+    }
+  }
+`;
+
+const detachStateOfApplicabilityMutation = graphql`
+  mutation FrameworkControlPageDetachStateOfApplicabilityMutation(
+    $input: DeleteStateOfApplicabilityControlMappingInput!
+    $connections: [ID!]!
+  ) {
+    deleteStateOfApplicabilityControlMapping(input: $input) {
+      deletedStateOfApplicabilityId
+      deletedControlId
+      deletedStateOfApplicabilityControlId @deleteEdge(connections: $connections)
+    }
+  }
+`;
+
 const attachMeasureMutation = graphql`
   mutation FrameworkControlPageAttachMutation(
     $input: CreateControlMeasureMappingInput!
@@ -111,6 +142,33 @@ const detachAuditMutation = graphql`
   }
 `;
 
+const attachObligationMutation = graphql`
+  mutation FrameworkControlPageAttachObligationMutation(
+    $input: CreateControlObligationMappingInput!
+    $connections: [ID!]!
+  ) {
+    createControlObligationMapping(input: $input) {
+      obligationEdge @prependEdge(connections: $connections) {
+        node {
+          id
+          ...LinkedObligationsCardFragment
+        }
+      }
+    }
+  }
+`;
+
+const detachObligationMutation = graphql`
+  mutation FrameworkControlPageDetachObligationMutation(
+    $input: DeleteControlObligationMappingInput!
+    $connections: [ID!]!
+  ) {
+    deleteControlObligationMapping(input: $input) {
+      deletedObligationId @deleteEdge(connections: $connections)
+    }
+  }
+`;
+
 const attachSnapshotMutation = graphql`
   mutation FrameworkControlPageAttachSnapshotMutation(
     $input: CreateControlSnapshotMappingInput!
@@ -168,16 +226,24 @@ export default function FrameworkControlPage({ queryRef }: Props) {
   const confirm = useConfirm();
   const navigate = useNavigate();
   const { isAuthorized } = use(PermissionsContext);
+  const [detachStateOfApplicability, isDetachingStateOfApplicability] = useMutation(detachStateOfApplicabilityMutation);
+  const [attachStateOfApplicability, isAttachingStateOfApplicability] = useMutation(attachStateOfApplicabilityMutation);
   const [detachMeasure, isDetachingMeasure] = useMutation(detachMeasureMutation);
   const [attachMeasure, isAttachingMeasure] = useMutation(attachMeasureMutation);
   const [detachDocument, isDetachingDocument] = useMutation(detachDocumentMutation);
   const [attachDocument, isAttachingDocument] = useMutation(attachDocumentMutation);
   const [detachAudit, isDetachingAudit] = useMutation(detachAuditMutation);
   const [attachAudit, isAttachingAudit] = useMutation(attachAuditMutation);
+  const [detachObligation, isDetachingObligation] = useMutation(detachObligationMutation);
+  const [attachObligation, isAttachingObligation] = useMutation(attachObligationMutation);
   const [detachSnapshot, isDetachingSnapshot] = useMutation(detachSnapshotMutation);
   const [attachSnapshot, isAttachingSnapshot] = useMutation(attachSnapshotMutation);
   const [deleteControl] = useMutation(deleteControlMutation);
 
+  const canLinkStateOfApplicability = isAuthorized("Control", "createStateOfApplicabilityControlMapping");
+  const canUnlinkStateOfApplicability = isAuthorized("Control", "deleteStateOfApplicabilityControlMapping");
+  const statesOfApplicabilityReadOnly = !canLinkStateOfApplicability && !canUnlinkStateOfApplicability;
+
   const canLinkMeasure = isAuthorized("Control", "createControlMeasureMapping");
   const canUnlinkMeasure = isAuthorized("Control", "deleteControlMeasureMapping");
   const measuresReadOnly = !canLinkMeasure && !canUnlinkMeasure;
@@ -190,6 +256,10 @@ export default function FrameworkControlPage({ queryRef }: Props) {
   const canUnlinkAudit = isAuthorized("Control", "deleteControlAuditMapping");
   const auditsReadOnly = !canLinkAudit && !canUnlinkAudit;
 
+  const canLinkObligation = isAuthorized("Control", "createControlObligationMapping");
+  const canUnlinkObligation = isAuthorized("Control", "deleteControlObligationMapping");
+  const obligationsReadOnly = !canLinkObligation && !canUnlinkObligation;
+
   const canLinkSnapshot = isAuthorized("Control", "createControlSnapshotMapping");
   const canUnlinkSnapshot = isAuthorized("Control", "deleteControlSnapshotMapping");
   const snapshotsReadOnly = !canLinkSnapshot && !canUnlinkSnapshot;
@@ -278,20 +348,20 @@ export default function FrameworkControlPage({ queryRef }: Props) {
         </div>
       </div>
 
-      {control.status === "EXCLUDED" && (
-        <div className="bg-danger border border-border-danger rounded-lg p-4">
-          <div className="flex items-center gap-2 mb-2">
-            <div className="font-medium text-txt-danger">
-              {__("This control is excluded")}
-            </div>
-          </div>
-          <div className="text-sm">
-            <strong>{__("Justification:")}</strong> {control.exclusionJustification || __("No justification provided")}
-          </div>
-        </div>
-      )}
       <div className={control.status === "EXCLUDED" ? "opacity-60" : ""}>
         <div className="text-base mb-4">{control.name}</div>
+        <div className="mb-4">
+          <LinkedStatesOfApplicabilityCard
+            variant="card"
+            statesOfApplicability={control.stateOfApplicabilityControls?.edges.map((edge) => edge.node) ?? []}
+            params={{ controlId: control.id }}
+            connectionId={control.stateOfApplicabilityControls?.__id ?? ""}
+            onAttach={withErrorHandling(attachStateOfApplicability, __("Failed to link state of applicability"))}
+            onDetach={withErrorHandling(detachStateOfApplicability, __("Failed to unlink state of applicability"))}
+            disabled={isAttachingStateOfApplicability || isDetachingStateOfApplicability}
+            readOnly={statesOfApplicabilityReadOnly}
+          />
+        </div>
         <div className="mb-4">
           <LinkedMeasuresCard
             variant="card"
@@ -328,6 +398,18 @@ export default function FrameworkControlPage({ queryRef }: Props) {
             readOnly={auditsReadOnly}
           />
         </div>
+        <div className="mb-4">
+          <LinkedObligationsCard
+            variant="card"
+            obligations={control.obligations?.edges.map((edge) => edge.node) ?? []}
+            params={{ controlId: control.id }}
+            connectionId={control.obligations?.__id ?? ""}
+            onAttach={withErrorHandling(attachObligation, __("Failed to link obligation"))}
+            onDetach={withErrorHandling(detachObligation, __("Failed to unlink obligation"))}
+            disabled={isAttachingObligation || isDetachingObligation}
+            readOnly={obligationsReadOnly}
+          />
+        </div>
         <div className="mb-4">
           <LinkedSnapshotsCard
             variant="card"

apps/console/src/pages/organizations/frameworks/FrameworkDetailPage.tsx

@@ -53,6 +53,7 @@ const frameworkDetailFragment = graphql`
           name
           status
           exclusionJustification
+          bestPractice
         }
       }
     }

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkControlPageAttachObligationMutation.graphql.ts

@@ -0,0 +1,235 @@
+/**
+ * @generated SignedSource<<b06f8ea18b076203f2e1ab8bae17d45f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CreateControlObligationMappingInput = {
+  controlId: string;
+  obligationId: string;
+};
+export type FrameworkControlPageAttachObligationMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: CreateControlObligationMappingInput;
+};
+export type FrameworkControlPageAttachObligationMutation$data = {
+  readonly createControlObligationMapping: {
+    readonly obligationEdge: {
+      readonly node: {
+        readonly id: string;
+        readonly " $fragmentSpreads": FragmentRefs<"LinkedObligationsCardFragment">;
+      };
+    };
+  };
+};
+export type FrameworkControlPageAttachObligationMutation = {
+  response: FrameworkControlPageAttachObligationMutation$data;
+  variables: FrameworkControlPageAttachObligationMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FrameworkControlPageAttachObligationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateControlObligationMappingPayload",
+        "kind": "LinkedField",
+        "name": "createControlObligationMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "ObligationEdge",
+            "kind": "LinkedField",
+            "name": "obligationEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "Obligation",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v3/*: any*/),
+                  {
+                    "args": null,
+                    "kind": "FragmentSpread",
+                    "name": "LinkedObligationsCardFragment"
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "FrameworkControlPageAttachObligationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateControlObligationMappingPayload",
+        "kind": "LinkedField",
+        "name": "createControlObligationMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "ObligationEdge",
+            "kind": "LinkedField",
+            "name": "obligationEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "Obligation",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v3/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "requirement",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "area",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "source",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "status",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "People",
+                    "kind": "LinkedField",
+                    "name": "owner",
+                    "plural": false,
+                    "selections": [
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "fullName",
+                        "storageKey": null
+                      },
+                      (v3/*: any*/)
+                    ],
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "obligationEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "e5dce8dc0bc03faa0e4d42696c76b59d",
+    "id": null,
+    "metadata": {},
+    "name": "FrameworkControlPageAttachObligationMutation",
+    "operationKind": "mutation",
+    "text": "mutation FrameworkControlPageAttachObligationMutation(\n  $input: CreateControlObligationMappingInput!\n) {\n  createControlObligationMapping(input: $input) {\n    obligationEdge {\n      node {\n        id\n        ...LinkedObligationsCardFragment\n      }\n    }\n  }\n}\n\nfragment LinkedObligationsCardFragment on Obligation {\n  id\n  requirement\n  area\n  source\n  status\n  owner {\n    fullName\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "3c4bfe48fd9db37ce70cecd890d7248a";
+
+export default node;

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkControlPageAttachStateOfApplicabilityMutation.graphql.ts

@@ -0,0 +1,237 @@
+/**
+ * @generated SignedSource<<6798ad28a0faeedef40b1b0a89f7563e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type CreateStateOfApplicabilityControlMappingInput = {
+  applicability: boolean;
+  controlId: string;
+  justification?: string | null | undefined;
+  stateOfApplicabilityId: string;
+};
+export type FrameworkControlPageAttachStateOfApplicabilityMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: CreateStateOfApplicabilityControlMappingInput;
+};
+export type FrameworkControlPageAttachStateOfApplicabilityMutation$data = {
+  readonly createStateOfApplicabilityControlMapping: {
+    readonly stateOfApplicabilityControlEdge: {
+      readonly node: {
+        readonly id: string;
+        readonly " $fragmentSpreads": FragmentRefs<"LinkedStatesOfApplicabilityCardFragment">;
+      };
+    };
+  };
+};
+export type FrameworkControlPageAttachStateOfApplicabilityMutation = {
+  response: FrameworkControlPageAttachStateOfApplicabilityMutation$data;
+  variables: FrameworkControlPageAttachStateOfApplicabilityMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v3/*: any*/),
+                  {
+                    "args": null,
+                    "kind": "FragmentSpread",
+                    "name": "LinkedStatesOfApplicabilityCardFragment"
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v3/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "stateOfApplicabilityId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "controlId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "concreteType": "StateOfApplicability",
+                    "kind": "LinkedField",
+                    "name": "stateOfApplicability",
+                    "plural": false,
+                    "selections": [
+                      (v3/*: any*/),
+                      {
+                        "alias": null,
+                        "args": null,
+                        "kind": "ScalarField",
+                        "name": "name",
+                        "storageKey": null
+                      }
+                    ],
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "applicability",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "justification",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "prependEdge",
+            "key": "",
+            "kind": "LinkedHandle",
+            "name": "stateOfApplicabilityControlEdge",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "205bc4f133e268c943ef9df9881350f0",
+    "id": null,
+    "metadata": {},
+    "name": "FrameworkControlPageAttachStateOfApplicabilityMutation",
+    "operationKind": "mutation",
+    "text": "mutation FrameworkControlPageAttachStateOfApplicabilityMutation(\n  $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n  createStateOfApplicabilityControlMapping(input: $input) {\n    stateOfApplicabilityControlEdge {\n      node {\n        id\n        ...LinkedStatesOfApplicabilityCardFragment\n      }\n    }\n  }\n}\n\nfragment LinkedStatesOfApplicabilityCardFragment on StateOfApplicabilityControl {\n  id\n  stateOfApplicabilityId\n  controlId\n  stateOfApplicability {\n    id\n    name\n  }\n  applicability\n  justification\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "8da7bd1e22eb2eaf857a4e97cea47e90";
+
+export default node;

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkControlPageDetachObligationMutation.graphql.ts

@@ -0,0 +1,133 @@
+/**
+ * @generated SignedSource<<b1b8d1f4c0dc579cacc0434be9b36259>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteControlObligationMappingInput = {
+  controlId: string;
+  obligationId: string;
+};
+export type FrameworkControlPageDetachObligationMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: DeleteControlObligationMappingInput;
+};
+export type FrameworkControlPageDetachObligationMutation$data = {
+  readonly deleteControlObligationMapping: {
+    readonly deletedObligationId: string;
+  };
+};
+export type FrameworkControlPageDetachObligationMutation = {
+  response: FrameworkControlPageDetachObligationMutation$data;
+  variables: FrameworkControlPageDetachObligationMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedObligationId",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FrameworkControlPageDetachObligationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteControlObligationMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteControlObligationMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "FrameworkControlPageDetachObligationMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteControlObligationMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteControlObligationMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "deleteEdge",
+            "key": "",
+            "kind": "ScalarHandle",
+            "name": "deletedObligationId",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "90f4a67d3a22217cc62841266c5a0450",
+    "id": null,
+    "metadata": {},
+    "name": "FrameworkControlPageDetachObligationMutation",
+    "operationKind": "mutation",
+    "text": "mutation FrameworkControlPageDetachObligationMutation(\n  $input: DeleteControlObligationMappingInput!\n) {\n  deleteControlObligationMapping(input: $input) {\n    deletedObligationId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "92da0169c3d421a658aa560b4e5ba1c8";
+
+export default node;

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkControlPageDetachStateOfApplicabilityMutation.graphql.ts

@@ -0,0 +1,153 @@
+/**
+ * @generated SignedSource<<b5ac3d2a6151aa858185089d6d979a34>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteStateOfApplicabilityControlMappingInput = {
+  controlId: string;
+  stateOfApplicabilityId: string;
+};
+export type FrameworkControlPageDetachStateOfApplicabilityMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: DeleteStateOfApplicabilityControlMappingInput;
+};
+export type FrameworkControlPageDetachStateOfApplicabilityMutation$data = {
+  readonly deleteStateOfApplicabilityControlMapping: {
+    readonly deletedControlId: string;
+    readonly deletedStateOfApplicabilityControlId: string;
+    readonly deletedStateOfApplicabilityId: string;
+  };
+};
+export type FrameworkControlPageDetachStateOfApplicabilityMutation = {
+  response: FrameworkControlPageDetachStateOfApplicabilityMutation$data;
+  variables: FrameworkControlPageDetachStateOfApplicabilityMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "connections"
+},
+v1 = {
+  "defaultValue": null,
+  "kind": "LocalArgument",
+  "name": "input"
+},
+v2 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedStateOfApplicabilityId",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedControlId",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "deletedStateOfApplicabilityControlId",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          (v4/*: any*/),
+          (v5/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "deleteStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          (v4/*: any*/),
+          (v5/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "deleteEdge",
+            "key": "",
+            "kind": "ScalarHandle",
+            "name": "deletedStateOfApplicabilityControlId",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "f0ec8162516546b2cdd221c0c9832908",
+    "id": null,
+    "metadata": {},
+    "name": "FrameworkControlPageDetachStateOfApplicabilityMutation",
+    "operationKind": "mutation",
+    "text": "mutation FrameworkControlPageDetachStateOfApplicabilityMutation(\n  $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n  deleteStateOfApplicabilityControlMapping(input: $input) {\n    deletedStateOfApplicabilityId\n    deletedControlId\n    deletedStateOfApplicabilityControlId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "f1a4efbd039ed9f457905903df50a160";
+
+export default node;

apps/console/src/pages/organizations/frameworks/__generated__/FrameworkDetailPageFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<1da75e11f49e841800329ded9f67a1d4>>
+ * @generated SignedSource<<1c21fa202a0315a19517c79eb93932f3>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -16,6 +16,7 @@ export type FrameworkDetailPageFragment$data = {
     readonly __id: string;
     readonly edges: ReadonlyArray<{
       readonly node: {
+        readonly bestPractice: boolean;
         readonly exclusionJustification: string | null | undefined;
         readonly id: string;
         readonly name: string;
@@ -155,6 +156,13 @@ return {
                   "kind": "ScalarField",
                   "name": "exclusionJustification",
                   "storageKey": null
+                },
+                {
+                  "alias": null,
+                  "args": null,
+                  "kind": "ScalarField",
+                  "name": "bestPractice",
+                  "storageKey": null
                 }
               ],
               "storageKey": null
@@ -183,6 +191,6 @@ return {
 };
 })();
 
-(node as any).hash = "34a82531b8812ee16e75eb035bc739e8";
+(node as any).hash = "e7be231a4f5cbad12945d2ca627cc442";
 
 export default node;

apps/console/src/pages/organizations/frameworks/dialogs/FrameworkControlDialog.tsx

@@ -6,8 +6,8 @@ import {
   DialogFooter,
   Input,
   Textarea,
-  Option,
   useDialogRef,
+  Checkbox,
 } from "@probo/ui";
 import type { ReactNode } from "react";
 import { useTranslate } from "@probo/i18n";
@@ -17,7 +17,6 @@ import type { FrameworkControlDialogFragment$key } from "./__generated__/Framewo
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import { z } from "zod";
 import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
-import { ControlledSelect } from "/components/form/ControlledField";
 import { useEffect, useMemo } from "react";
 
 type Props = {
@@ -35,6 +34,7 @@ const controlFragment = graphql`
     sectionTitle
     status
     exclusionJustification
+    bestPractice
   }
 `;
 
@@ -67,16 +67,7 @@ const schema = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),
   sectionTitle: z.string(),
-  status: z.enum(["INCLUDED", "EXCLUDED"]),
-  exclusionJustification: z.string().optional(),
-}).refine((data) => {
-  if (data.status === "EXCLUDED") {
-    return data.exclusionJustification && data.exclusionJustification.trim().length > 0;
-  }
-  return true;
-}, {
-  message: "Exclusion justification is required when status is excluded",
-  path: ["exclusionJustification"],
+  bestPractice: z.boolean(),
 });
 
 export function FrameworkControlDialog(props: Props) {
@@ -92,11 +83,10 @@ export function FrameworkControlDialog(props: Props) {
     name: frameworkControl?.name ?? "",
     description: frameworkControl?.description ?? "",
     sectionTitle: frameworkControl?.sectionTitle ?? "",
-    status: frameworkControl?.status ?? "INCLUDED",
-    exclusionJustification: frameworkControl?.exclusionJustification ?? "",
+    bestPractice: frameworkControl?.bestPractice ?? true,
   }), [frameworkControl]);
 
-  const { control, handleSubmit, register, reset, watch } = useFormWithSchema(schema, {
+  const { handleSubmit, register, reset, watch, setValue } = useFormWithSchema(schema, {
     defaultValues,
   });
 
@@ -104,8 +94,7 @@ export function FrameworkControlDialog(props: Props) {
     reset(defaultValues);
   }, [defaultValues, reset]);
 
-  const statusValue = watch("status");
-  const showExclusionJustification = statusValue === "EXCLUDED";
+  const bestPracticeValue = watch("bestPractice");
 
   const onSubmit = handleSubmit(async (data) => {
     if (frameworkControl) {
@@ -117,8 +106,7 @@ export function FrameworkControlDialog(props: Props) {
             name: data.name,
             description: data.description || null,
             sectionTitle: data.sectionTitle,
-            status: data.status,
-            exclusionJustification: data.status === "EXCLUDED" ? data.exclusionJustification : null,
+            bestPractice: data.bestPractice,
           },
         },
       });
@@ -131,8 +119,7 @@ export function FrameworkControlDialog(props: Props) {
             name: data.name,
             description: data.description || null,
             sectionTitle: data.sectionTitle,
-            status: data.status,
-            exclusionJustification: data.status === "EXCLUDED" ? data.exclusionJustification : null,
+            bestPractice: data.bestPractice ?? true,
           },
           connections: [props.connectionId!],
         },
@@ -178,23 +165,13 @@ export function FrameworkControlDialog(props: Props) {
             placeholder={__("Add description")}
             {...register("description")}
           />
-          <ControlledSelect
-            control={control}
-            name="status"
-            placeholder={__("Select status")}
-          >
-            <Option value="INCLUDED">{__("Included")}</Option>
-            <Option value="EXCLUDED">{__("Excluded")}</Option>
-          </ControlledSelect>
-          {showExclusionJustification && (
-            <Textarea
-              required
-              id="exclusionJustification"
-              variant="bordered"
-              placeholder={__("Reason for exclusion")}
-              {...register("exclusionJustification")}
+          <label className="flex items-center gap-2 cursor-pointer">
+            <Checkbox
+              checked={bestPracticeValue}
+              onChange={(checked) => setValue("bestPractice", checked)}
             />
-          )}
+            <span className="text-sm">{__("Best Practice")}</span>
+          </label>
         </DialogContent>
         <DialogFooter>
           <Button type="submit" disabled={isMutating}>

apps/console/src/pages/organizations/frameworks/dialogs/__generated__/FrameworkControlDialogCreateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7985268ac23df51ae6187b72c4f33d83>>
+ * @generated SignedSource<<35c2c66dca0c895c7abca2b0f4917a68>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type ControlStatus = "EXCLUDED" | "INCLUDED";
 export type CreateControlInput = {
+  bestPractice: boolean;
   description?: string | null | undefined;
   exclusionJustification?: string | null | undefined;
   frameworkId: string;
@@ -181,6 +182,13 @@ return {
                     "kind": "ScalarField",
                     "name": "exclusionJustification",
                     "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "bestPractice",
+                    "storageKey": null
                   }
                 ],
                 "storageKey": null
@@ -210,12 +218,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "3df2d5a0a51c774ccf711423e947093d",
+    "cacheID": "81df1f9c65937d3e387edffc6e9a28ac",
     "id": null,
     "metadata": {},
     "name": "FrameworkControlDialogCreateMutation",
     "operationKind": "mutation",
-    "text": "mutation FrameworkControlDialogCreateMutation(\n  $input: CreateControlInput!\n) {\n  createControl(input: $input) {\n    controlEdge {\n      node {\n        ...FrameworkControlDialogFragment\n        id\n      }\n    }\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n}\n"
+    "text": "mutation FrameworkControlDialogCreateMutation(\n  $input: CreateControlInput!\n) {\n  createControl(input: $input) {\n    controlEdge {\n      node {\n        ...FrameworkControlDialogFragment\n        id\n      }\n    }\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n  bestPractice\n}\n"
   }
 };
 })();

apps/console/src/pages/organizations/frameworks/dialogs/__generated__/FrameworkControlDialogFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<67703eb04d68c2798f5549ed6d948339>>
+ * @generated SignedSource<<3a62e5f931a990d83caca02ab629b0c0>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ import { ReaderFragment } from 'relay-runtime';
 export type ControlStatus = "EXCLUDED" | "INCLUDED";
 import { FragmentRefs } from "relay-runtime";
 export type FrameworkControlDialogFragment$data = {
+  readonly bestPractice: boolean;
   readonly description: string | null | undefined;
   readonly exclusionJustification: string | null | undefined;
   readonly id: string;
@@ -72,12 +73,19 @@ const node: ReaderFragment = {
       "kind": "ScalarField",
       "name": "exclusionJustification",
       "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "bestPractice",
+      "storageKey": null
     }
   ],
   "type": "Control",
   "abstractKey": null
 };
 
-(node as any).hash = "856a8302abf15737b6a4d4316b77f8cc";
+(node as any).hash = "481f75ce8c525c1fa12517ef173ad868";
 
 export default node;

apps/console/src/pages/organizations/frameworks/dialogs/__generated__/FrameworkControlDialogUpdateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<7d04994d5cabbbfc12f82754e8da0d83>>
+ * @generated SignedSource<<7ee3c72e16fa86d6c006c004e4f93c95>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -12,6 +12,7 @@ import { ConcreteRequest } from 'relay-runtime';
 import { FragmentRefs } from "relay-runtime";
 export type ControlStatus = "EXCLUDED" | "INCLUDED";
 export type UpdateControlInput = {
+  bestPractice?: boolean | null | undefined;
   description?: string | null | undefined;
   exclusionJustification?: string | null | undefined;
   id: string;
@@ -150,6 +151,13 @@ return {
                 "kind": "ScalarField",
                 "name": "exclusionJustification",
                 "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "bestPractice",
+                "storageKey": null
               }
             ],
             "storageKey": null
@@ -160,12 +168,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "cee79ce9185400bad478453c44930dd6",
+    "cacheID": "374c69b33dd6e94dec75829fe0777f58",
     "id": null,
     "metadata": {},
     "name": "FrameworkControlDialogUpdateMutation",
     "operationKind": "mutation",
-    "text": "mutation FrameworkControlDialogUpdateMutation(\n  $input: UpdateControlInput!\n) {\n  updateControl(input: $input) {\n    control {\n      ...FrameworkControlDialogFragment\n      id\n    }\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n}\n"
+    "text": "mutation FrameworkControlDialogUpdateMutation(\n  $input: UpdateControlInput!\n) {\n  updateControl(input: $input) {\n    control {\n      ...FrameworkControlDialogFragment\n      id\n    }\n  }\n}\n\nfragment FrameworkControlDialogFragment on Control {\n  id\n  name\n  description\n  sectionTitle\n  status\n  exclusionJustification\n  bestPractice\n}\n"
   }
 };
 })();

apps/console/src/pages/organizations/obligations/ObligationDetailsPage.tsx

@@ -32,7 +32,7 @@ import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import { Controller } from "react-hook-form";
 import { formatError, type GraphQLError } from "@probo/helpers";
 import z from "zod";
-import { getObligationStatusVariant, getObligationStatusLabel, formatDatetime, getObligationStatusOptions, validateSnapshotConsistency } from "@probo/helpers";
+import { getObligationStatusVariant, getObligationStatusLabel, formatDatetime, getObligationStatusOptions, getObligationTypeOptions, validateSnapshotConsistency } from "@probo/helpers";
 import { SnapshotBanner } from "/components/SnapshotBanner";
 import type { ObligationGraphNodeQuery } from "/hooks/graph/__generated__/ObligationGraphNodeQuery.graphql";
 import { use } from "react";
@@ -44,6 +44,7 @@ const updateObligationSchema = z.object({
   requirement: z.string().optional(),
   actionsToBeImplemented: z.string().optional(),
   regulator: z.string().optional(),
+  type: z.enum(["LEGAL", "CONTRACTUAL"]),
   lastReviewDate: z.string().optional(),
   dueDate: z.string().optional(),
   status: z.enum(["NON_COMPLIANT", "PARTIALLY_COMPLIANT", "COMPLIANT"]),
@@ -68,6 +69,7 @@ export default function ObligationDetailsPage(props: Props) {
 
   const updateObligation = useUpdateObligation();
   const statusOptions = getObligationStatusOptions(__);
+  const typeOptions = getObligationTypeOptions(__);
 
   const connectionId = ConnectionHandler.getConnectionID(
     organizationId,
@@ -88,6 +90,7 @@ export default function ObligationDetailsPage(props: Props) {
         requirement: obligation?.requirement || "",
         actionsToBeImplemented: obligation?.actionsToBeImplemented || "",
         regulator: obligation?.regulator || "",
+        type: obligation?.type ?? "LEGAL",
         lastReviewDate: obligation?.lastReviewDate
           ? new Date(obligation.lastReviewDate).toISOString().split("T")[0]
           : "",
@@ -109,6 +112,7 @@ export default function ObligationDetailsPage(props: Props) {
         requirement: formData.requirement || undefined,
         actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
         regulator: formData.regulator || undefined,
+        type: formData.type,
         lastReviewDate: formatDatetime(formData.lastReviewDate) ?? null,
         dueDate: formatDatetime(formData.dueDate) ?? null,
         status: formData.status,
@@ -247,6 +251,29 @@ export default function ObligationDetailsPage(props: Props) {
                 disabled={isSnapshotMode}
               />
             </Field>
+
+            <Field label={__("Type")} error={formState.errors.type?.message}>
+              <Controller
+                control={control}
+                name="type"
+                render={({ field }) => (
+                  <Select
+                    variant="editor"
+                    placeholder={__("Select type")}
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="w-full"
+                    disabled={isSnapshotMode}
+                  >
+                    {typeOptions.map((option) => (
+                      <Option key={option.value} value={option.value}>
+                        {option.label}
+                      </Option>
+                    ))}
+                  </Select>
+                )}
+              />
+            </Field>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

apps/console/src/pages/organizations/obligations/dialogs/CreateObligationDialog.tsx

@@ -21,7 +21,7 @@ import { useCreateObligation } from "../../../../hooks/graph/ObligationGraph";
 import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import { Controller } from "react-hook-form";
 import { formatError, type GraphQLError } from "@probo/helpers";
-import { formatDatetime, getObligationStatusOptions } from "@probo/helpers";
+import { formatDatetime, getObligationStatusOptions, getObligationTypeOptions } from "@probo/helpers";
 
 const schema = z.object({
   area: z.string().optional(),
@@ -29,6 +29,7 @@ const schema = z.object({
   requirement: z.string().optional(),
   actionsToBeImplemented: z.string().optional(),
   regulator: z.string().optional(),
+  type: z.enum(["LEGAL", "CONTRACTUAL"]),
   ownerId: z.string().min(1, "Owner is required"),
   lastReviewDate: z.string().optional(),
   dueDate: z.string().optional(),
@@ -54,6 +55,7 @@ export function CreateObligationDialog({
 
   const createObligation = useCreateObligation(connection || "");
   const statusOptions = getObligationStatusOptions(__);
+  const typeOptions = getObligationTypeOptions(__);
 
   const { register, handleSubmit, formState, reset, control } = useFormWithSchema(schema, {
     defaultValues: {
@@ -62,6 +64,7 @@ export function CreateObligationDialog({
       requirement: "",
       actionsToBeImplemented: "",
       regulator: "",
+      type: "LEGAL" as const,
       ownerId: "",
       lastReviewDate: "",
       dueDate: "",
@@ -78,6 +81,7 @@ export function CreateObligationDialog({
         requirement: formData.requirement || undefined,
         actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
         regulator: formData.regulator || undefined,
+        type: formData.type,
         ownerId: formData.ownerId,
         lastReviewDate: formatDatetime(formData.lastReviewDate),
         dueDate: formatDatetime(formData.dueDate),
@@ -169,6 +173,31 @@ export function CreateObligationDialog({
               placeholder={__("Enter regulator")}
               error={formState.errors.regulator?.message}
             />
+
+            <Field label={__("Type")}>
+              <Controller
+                control={control}
+                name="type"
+                render={({ field }) => (
+                  <Select
+                    variant="editor"
+                    placeholder={__("Select type")}
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="w-full"
+                  >
+                    {typeOptions.map((option) => (
+                      <Option key={option.value} value={option.value}>
+                        {option.label}
+                      </Option>
+                    ))}
+                  </Select>
+                )}
+              />
+              {formState.errors.type && (
+                <p className="text-sm text-red-500 mt-1">{formState.errors.type.message}</p>
+              )}
+            </Field>
           </div>
 
           <div className="grid grid-cols-2 gap-4">

apps/console/src/pages/organizations/snapshots/__generated__/SnapshotsPageFragment.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<79d48ab0fd5b269022244b0777eac279>>
+ * @generated SignedSource<<e9e261236245bcf1724038c76fe9918c>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ReaderFragment } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 import { FragmentRefs } from "relay-runtime";
 export type SnapshotsPageFragment$data = {
   readonly snapshots: {

apps/console/src/pages/organizations/snapshots/dialog/__generated__/SnapshotFormDialogCreateMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<4a28eec1f25c5d290bc070a534042521>>
+ * @generated SignedSource<<d0a4f2beac754ba3a7865f227b9d6aae>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,7 +9,7 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "VENDORS";
+export type SnapshotsType = "ASSETS" | "CONTINUAL_IMPROVEMENTS" | "DATA" | "NONCONFORMITIES" | "OBLIGATIONS" | "PROCESSING_ACTIVITIES" | "RISKS" | "STATES_OF_APPLICABILITY" | "VENDORS";
 export type CreateSnapshotInput = {
   description?: string | null | undefined;
   name: string;

apps/console/src/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage.tsx

@@ -0,0 +1,364 @@
+import { useNavigate, useParams } from "react-router";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import {
+  ActionDropdown,
+  Breadcrumb,
+  DropdownItem,
+  IconTrashCan,
+  IconArrowDown,
+  PageHeader,
+  Card,
+  Button,
+  IconPencil,
+  IconCheckmark1,
+  IconCrossLargeX,
+  Input,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import {
+  ConnectionHandler,
+  graphql,
+  type PreloadedQuery,
+  usePreloadedQuery,
+} from "react-relay";
+import type {
+  StateOfApplicabilityGraphNodeQuery,
+} from "/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql";
+import type { StateOfApplicabilityDetailPageExportMutation } from "./__generated__/StateOfApplicabilityDetailPageExportMutation.graphql";
+import {
+  StateOfApplicabilityConnectionKey,
+  stateOfApplicabilityNodeQuery,
+  useDeleteStateOfApplicability,
+  updateStateOfApplicabilityMutation,
+} from "/hooks/graph/StateOfApplicabilityGraph";
+import { use, useState, Suspense } from "react";
+import { PermissionsContext } from "/providers/PermissionsContext";
+import { usePageTitle } from "@probo/hooks";
+import { formatDate, validateSnapshotConsistency } from "@probo/helpers";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { z } from "zod";
+import StateOfApplicabilityControlsTab from "./tabs/StateOfApplicabilityControlsTab";
+import { SnapshotBanner } from "/components/SnapshotBanner";
+import { PeopleSelectField } from "/components/form/PeopleSelectField";
+
+const exportStateOfApplicabilityPDFMutation = graphql`
+  mutation StateOfApplicabilityDetailPageExportMutation($input: ExportStateOfApplicabilityPDFInput!) {
+    exportStateOfApplicabilityPDF(input: $input) {
+      data
+    }
+  }
+`;
+
+type Props = {
+  queryRef: PreloadedQuery<StateOfApplicabilityGraphNodeQuery>;
+};
+
+export default function StateOfApplicabilityDetailPage(props: Props) {
+  const { stateOfApplicabilityId, snapshotId } = useParams<{ stateOfApplicabilityId: string; snapshotId?: string }>();
+  const organizationId = useOrganizationId();
+  const data = usePreloadedQuery(stateOfApplicabilityNodeQuery, props.queryRef);
+  const stateOfApplicability = data.node;
+  const { __ } = useTranslate();
+  const navigate = useNavigate();
+  const { isAuthorized } = use(PermissionsContext);
+  const isSnapshotMode = Boolean(snapshotId);
+
+  if (!stateOfApplicabilityId || !stateOfApplicability) {
+    throw new Error(
+      "Cannot load state of applicability detail page without stateOfApplicabilityId parameter",
+    );
+  }
+
+  validateSnapshotConsistency(stateOfApplicability, snapshotId);
+
+  const connectionId = ConnectionHandler.getConnectionID(
+    organizationId,
+    StateOfApplicabilityConnectionKey,
+  );
+
+  const deleteStateOfApplicability = useDeleteStateOfApplicability(
+    stateOfApplicability,
+    connectionId,
+    () => navigate(`/organizations/${organizationId}/states-of-applicability`),
+  );
+
+  usePageTitle(stateOfApplicability.name || __("State of Applicability"));
+
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [isEditingOwner, setIsEditingOwner] = useState(false);
+  const [updateStateOfApplicability, isUpdating] = useMutationWithToasts(
+    updateStateOfApplicabilityMutation,
+    {
+      successMessage: __("State of Applicability updated successfully."),
+      errorMessage: __("Failed to update State of Applicability"),
+    }
+  );
+
+  const canUpdate = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
+  const canDelete = !isSnapshotMode && isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
+
+  const [exportStateOfApplicabilityPDF, isExporting] = useMutationWithToasts<StateOfApplicabilityDetailPageExportMutation>(
+    exportStateOfApplicabilityPDFMutation,
+    {
+      successMessage: __("State of Applicability exported successfully."),
+      errorMessage: __("Failed to export State of Applicability"),
+    }
+  );
+
+  const handleExport = () => {
+    if (!stateOfApplicability.id) return;
+
+    exportStateOfApplicabilityPDF({
+      variables: {
+        input: {
+          stateOfApplicabilityId: stateOfApplicability.id,
+        },
+      },
+      onCompleted: (data) => {
+        if (data.exportStateOfApplicabilityPDF?.data) {
+          const link = window.document.createElement("a");
+          link.href = data.exportStateOfApplicabilityPDF.data;
+          link.download = `${stateOfApplicability.name || "state-of-applicability"}.pdf`;
+          window.document.body.appendChild(link);
+          link.click();
+          window.document.body.removeChild(link);
+        }
+      },
+    });
+  };
+
+  const nameSchema = z.object({
+    name: z.string().min(1, __("Name is required")),
+  });
+
+  const ownerSchema = z.object({
+    ownerId: z.string().min(1, __("Owner is required")),
+  });
+
+  const { register: registerName, handleSubmit: handleSubmitName, reset: resetName } = useFormWithSchema(
+    nameSchema,
+    {
+      defaultValues: {
+        name: stateOfApplicability.name || "",
+      },
+    }
+  );
+
+  const { control: controlOwner, handleSubmit: handleSubmitOwner, reset: resetOwner } = useFormWithSchema(
+    ownerSchema,
+    {
+      defaultValues: {
+        ownerId: stateOfApplicability.owner?.id || "",
+      },
+    }
+  );
+
+  const handleUpdateName = handleSubmitName((data) => {
+    if (!stateOfApplicability.id) return;
+
+    updateStateOfApplicability({
+      variables: {
+        input: {
+          id: stateOfApplicability.id,
+          name: data.name,
+        },
+      },
+      onSuccess: () => {
+        setIsEditingName(false);
+        resetName({ name: data.name });
+      },
+    });
+  });
+
+  const handleUpdateOwner = handleSubmitOwner((data) => {
+    if (!stateOfApplicability.id) return;
+
+    updateStateOfApplicability({
+      variables: {
+        input: {
+          id: stateOfApplicability.id,
+          ownerId: data.ownerId,
+        },
+      },
+      onSuccess: () => {
+        setIsEditingOwner(false);
+        resetOwner({ ownerId: data.ownerId });
+      },
+    });
+  });
+
+  const handleCancelNameEdit = () => {
+    setIsEditingName(false);
+    resetName({
+      name: stateOfApplicability.name || "",
+    });
+  };
+
+  const handleCancelOwnerEdit = () => {
+    setIsEditingOwner(false);
+    resetOwner({
+      ownerId: stateOfApplicability.owner?.id || "",
+    });
+  };
+
+  const listUrl = snapshotId
+    ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability`
+    : `/organizations/${organizationId}/states-of-applicability`;
+
+  return (
+    <div className="space-y-6">
+      {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
+      <Breadcrumb
+        items={[
+          {
+            label: __("States of Applicability"),
+            to: listUrl,
+          },
+          {
+            label: stateOfApplicability.name || __("State of Applicability detail"),
+          },
+        ]}
+      />
+
+      <PageHeader
+        title={
+          isEditingName && canUpdate ? (
+            <div className="flex items-center gap-2">
+              <Input
+                {...registerName("name")}
+                variant="title"
+                className="flex-1"
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === "Escape") {
+                    handleCancelNameEdit();
+                  }
+                  if (e.key === "Enter" && e.ctrlKey) {
+                    handleUpdateName();
+                  }
+                }}
+              />
+              <Button
+                variant="quaternary"
+                icon={IconCheckmark1}
+                onClick={handleUpdateName}
+                disabled={isUpdating}
+              />
+              <Button
+                variant="quaternary"
+                icon={IconCrossLargeX}
+                onClick={handleCancelNameEdit}
+              />
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <span>{stateOfApplicability.name || ""}</span>
+              {canUpdate && (
+                <Button
+                  variant="quaternary"
+                  icon={IconPencil}
+                  onClick={() => setIsEditingName(true)}
+                />
+              )}
+            </div>
+          )
+        }
+      >
+        <Button
+          variant="secondary"
+          icon={IconArrowDown}
+          onClick={handleExport}
+          disabled={isExporting}
+        >
+          {__("Export")}
+        </Button>
+        {canDelete && (
+          <ActionDropdown variant="secondary">
+            <DropdownItem variant="danger" icon={IconTrashCan} onClick={deleteStateOfApplicability}>
+              {__("Delete")}
+            </DropdownItem>
+          </ActionDropdown>
+        )}
+      </PageHeader>
+
+      <div className="space-y-6">
+        <div className="space-y-4">
+          <h2 className="text-base font-medium">{__("Details")}</h2>
+          <Card className="space-y-4" padded>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Owner")}
+                </div>
+                {isEditingOwner && canUpdate ? (
+                  <div className="flex items-center gap-2">
+                    <Suspense fallback={<div>{__("Loading...")}</div>}>
+                      <PeopleSelectField
+                        organizationId={organizationId}
+                        control={controlOwner}
+                        name="ownerId"
+                      />
+                    </Suspense>
+                    <Button
+                      variant="quaternary"
+                      icon={IconCheckmark1}
+                      onClick={handleUpdateOwner}
+                      disabled={isUpdating}
+                    />
+                    <Button
+                      variant="quaternary"
+                      icon={IconCrossLargeX}
+                      onClick={handleCancelOwnerEdit}
+                    />
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <div className="text-sm text-txt-primary">
+                      {stateOfApplicability.owner?.fullName || "-"}
+                    </div>
+                    {canUpdate && (
+                      <Button
+                        variant="quaternary"
+                        icon={IconPencil}
+                        onClick={() => setIsEditingOwner(true)}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Created at")}
+                </div>
+                <div className="text-sm text-txt-primary">
+                  {formatDate(stateOfApplicability.createdAt)}
+                </div>
+              </div>
+              <div>
+                <div className="text-xs text-txt-tertiary font-semibold mb-1">
+                  {__("Updated at")}
+                </div>
+                <div className="text-sm text-txt-primary">
+                  {formatDate(stateOfApplicability.updatedAt)}
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+
+        {stateOfApplicability.id && (
+          <div className="space-y-4">
+            <h2 className="text-base font-medium">{__("Controls")}</h2>
+            <StateOfApplicabilityControlsTab
+              stateOfApplicability={stateOfApplicability as typeof stateOfApplicability & { id: string }}
+              isSnapshotMode={isSnapshotMode}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/console/src/pages/organizations/states-of-applicability/StatesOfApplicabilityPage.tsx

@@ -0,0 +1,192 @@
+import {
+  Button,
+  IconPlusLarge,
+  PageHeader,
+  Card,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  ActionDropdown,
+  DropdownItem,
+  IconTrashCan,
+  Table,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import type { StateOfApplicabilityGraphPaginatedQuery } from "/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedQuery.graphql";
+import { type PreloadedQuery } from "react-relay";
+import {
+  useStateOfApplicabilityQuery,
+  useDeleteStateOfApplicability,
+} from "/hooks/graph/StateOfApplicabilityGraph";
+import type { StateOfApplicabilityGraphPaginatedFragment$data } from "/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedFragment.graphql";
+import type { NodeOf } from "/types";
+import { usePageTitle } from "@probo/hooks";
+import { CreateStateOfApplicabilityDialog } from "./dialogs/CreateStateOfApplicabilityDialog";
+import { PermissionsContext } from "/providers/PermissionsContext";
+import { use, useEffect } from "react";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import { formatDate } from "@probo/helpers";
+import { useParams } from "react-router";
+import { SnapshotBanner } from "/components/SnapshotBanner";
+
+type StateOfApplicability = NodeOf<
+  StateOfApplicabilityGraphPaginatedFragment$data["statesOfApplicability"]
+>;
+
+export default function StatesOfApplicabilityPage({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<StateOfApplicabilityGraphPaginatedQuery>;
+}) {
+  const { __ } = useTranslate();
+  const { isAuthorized } = use(PermissionsContext);
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const isSnapshotMode = Boolean(snapshotId);
+  const {
+    statesOfApplicability,
+    connectionId,
+    hasNext,
+    loadNext,
+    isLoadingNext,
+    refetch,
+  } = useStateOfApplicabilityQuery(queryRef);
+
+  usePageTitle(__("States of Applicability"));
+
+  // Refetch with snapshot filter when in snapshot mode
+  useEffect(() => {
+    if (snapshotId) {
+      refetch({ filter: { snapshotId } }, { fetchPolicy: 'store-or-network' });
+    }
+  }, [snapshotId, refetch]);
+
+  const hasAnyAction = !isSnapshotMode &&
+    isAuthorized("StateOfApplicability", "deleteStateOfApplicability");
+
+  return (
+    <div className="space-y-6">
+      {snapshotId && <SnapshotBanner snapshotId={snapshotId} />}
+      <PageHeader
+        title={__("States of Applicability")}
+        description={__(
+          "Manage states of applicability for your organization's frameworks.",
+        )}
+      >
+        {!isSnapshotMode && isAuthorized("Organization", "createStateOfApplicability") && (
+          <CreateStateOfApplicabilityDialog connectionId={connectionId}>
+            <Button icon={IconPlusLarge}>
+              {__("Add state of applicability")}
+            </Button>
+          </CreateStateOfApplicabilityDialog>
+        )}
+      </PageHeader>
+
+      {statesOfApplicability && statesOfApplicability.length > 0 ? (
+        <Card>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>{__("Name")}</Th>
+                <Th>{__("Created at")}</Th>
+                <Th>{__("Controls")}</Th>
+                {hasAnyAction && <Th>{__("Actions")}</Th>}
+              </Tr>
+            </Thead>
+            <Tbody>
+              {statesOfApplicability.map((soa) => (
+                <StateOfApplicabilityRow
+                  key={soa.id}
+                  stateOfApplicability={soa}
+                  connectionId={connectionId}
+                  hasAnyAction={hasAnyAction}
+                />
+              ))}
+            </Tbody>
+          </Table>
+
+          {hasNext && (
+            <div className="p-4 border-t">
+              <Button
+                variant="secondary"
+                onClick={() => loadNext(50)}
+                disabled={isLoadingNext}
+              >
+                {isLoadingNext ? __("Loading...") : __("Load more")}
+              </Button>
+            </div>
+          )}
+        </Card>
+      ) : (
+        <Card padded>
+          <div className="text-center py-12">
+            <h3 className="text-lg font-semibold mb-2">
+              {__("No states of applicability yet")}
+            </h3>
+            <p className="text-txt-tertiary mb-4">
+              {__("Create your first state of applicability to get started.")}
+            </p>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}
+
+function StateOfApplicabilityRow({
+  stateOfApplicability,
+  connectionId,
+  hasAnyAction,
+}: {
+  stateOfApplicability: StateOfApplicability;
+  connectionId: string;
+  hasAnyAction: boolean;
+}) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const { snapshotId } = useParams<{ snapshotId?: string }>();
+  const deleteStateOfApplicability = useDeleteStateOfApplicability(
+    stateOfApplicability,
+    connectionId,
+  );
+  const { isAuthorized } = use(PermissionsContext);
+
+  const detailUrl = snapshotId
+    ? `/organizations/${organizationId}/snapshots/${snapshotId}/states-of-applicability/${stateOfApplicability.id}`
+    : `/organizations/${organizationId}/states-of-applicability/${stateOfApplicability.id}`;
+
+  return (
+    <Tr to={detailUrl}>
+      <Td>{stateOfApplicability.name}</Td>
+      <Td>
+        <time dateTime={stateOfApplicability.createdAt}>
+          {formatDate(stateOfApplicability.createdAt)}
+        </time>
+      </Td>
+      <Td>{stateOfApplicability.controlsInfo?.totalCount ?? 0}</Td>
+      {hasAnyAction && (
+        <Td noLink width={50} className="text-end">
+          <ActionDropdown>
+            {isAuthorized(
+              "StateOfApplicability",
+              "deleteStateOfApplicability",
+            ) && (
+              <DropdownItem
+                icon={IconTrashCan}
+                variant="danger"
+                onSelect={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  deleteStateOfApplicability();
+                }}
+              >
+                {__("Delete")}
+              </DropdownItem>
+            )}
+          </ActionDropdown>
+        </Td>
+      )}
+    </Tr>
+  );
+}

apps/console/src/pages/organizations/states-of-applicability/__generated__/StateOfApplicabilityDetailPageExportMutation.graphql.ts

@@ -0,0 +1,92 @@
+/**
+ * @generated SignedSource<<9dc238538172b956fb81954024522ee1>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type ExportStateOfApplicabilityPDFInput = {
+  stateOfApplicabilityId: string;
+};
+export type StateOfApplicabilityDetailPageExportMutation$variables = {
+  input: ExportStateOfApplicabilityPDFInput;
+};
+export type StateOfApplicabilityDetailPageExportMutation$data = {
+  readonly exportStateOfApplicabilityPDF: {
+    readonly data: string;
+  };
+};
+export type StateOfApplicabilityDetailPageExportMutation = {
+  response: StateOfApplicabilityDetailPageExportMutation$data;
+  variables: StateOfApplicabilityDetailPageExportMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "ExportStateOfApplicabilityPDFPayload",
+    "kind": "LinkedField",
+    "name": "exportStateOfApplicabilityPDF",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "data",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityDetailPageExportMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityDetailPageExportMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "dbc24d23ab71abb76f95b114f86f200d",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityDetailPageExportMutation",
+    "operationKind": "mutation",
+    "text": "mutation StateOfApplicabilityDetailPageExportMutation(\n  $input: ExportStateOfApplicabilityPDFInput!\n) {\n  exportStateOfApplicabilityPDF(input: $input) {\n    data\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "36be308a451ada118c2bcc9c3b0c0a2b";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/dialogs/CreateStateOfApplicabilityDialog.tsx

@@ -0,0 +1,110 @@
+import { useTranslate } from "@probo/i18n";
+import {
+  Breadcrumb,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  useDialogRef,
+} from "@probo/ui";
+import type { ReactNode } from "react";
+import { useNavigate } from "react-router";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import z from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { createStateOfApplicabilityMutation } from "/hooks/graph/StateOfApplicabilityGraph";
+import type { StateOfApplicabilityGraphCreateMutation } from "/hooks/graph/__generated__/StateOfApplicabilityGraphCreateMutation.graphql";
+import { PeopleSelectField } from "/components/form/PeopleSelectField";
+import { Suspense } from "react";
+
+type Props = {
+  children: ReactNode;
+  connectionId: string;
+};
+
+const schema = z.object({
+  name: z.string().min(1),
+  ownerId: z.string().min(1),
+});
+
+export function CreateStateOfApplicabilityDialog({
+  children,
+  connectionId,
+}: Props) {
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
+  const navigate = useNavigate();
+  const { control, register, handleSubmit, reset } = useFormWithSchema(schema, {
+    defaultValues: {
+      name: "",
+      ownerId: "",
+    },
+  });
+  const ref = useDialogRef();
+
+  const [mutate, isMutating] = useMutationWithToasts<StateOfApplicabilityGraphCreateMutation>(
+    createStateOfApplicabilityMutation,
+    {
+      successMessage: __("State of applicability created successfully."),
+      errorMessage: __("Failed to create state of applicability"),
+    },
+  );
+
+  const onSubmit = handleSubmit((data) => {
+    mutate({
+      variables: {
+        input: {
+          name: data.name,
+          organizationId,
+          ownerId: data.ownerId,
+        },
+        connections: [connectionId],
+      },
+      onCompleted: (response) => {
+        reset();
+        ref.current?.close();
+        const stateOfApplicabilityId = response.createStateOfApplicability.stateOfApplicabilityEdge.node.id;
+        navigate(`/organizations/${organizationId}/states-of-applicability/${stateOfApplicabilityId}`);
+      },
+    });
+  });
+
+  return (
+    <Dialog
+      ref={ref}
+      trigger={children}
+      title={
+        <Breadcrumb
+          items={[__("States of Applicability"), __("New State of Applicability")]}
+        />
+      }
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent padded className="space-y-4">
+          <Field
+            label={__("Name")}
+            {...register("name")}
+            type="text"
+            required
+          />
+          <Field label={__("Owner")}>
+            <Suspense fallback={<div>{__("Loading...")}</div>}>
+              <PeopleSelectField
+                organizationId={organizationId}
+                control={control}
+                name="ownerId"
+              />
+            </Suspense>
+          </Field>
+        </DialogContent>
+        <DialogFooter>
+          <Button disabled={isMutating} type="submit">
+            {__("Create")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
+}

apps/console/src/pages/organizations/states-of-applicability/dialogs/EditControlDialog.tsx

@@ -0,0 +1,176 @@
+import { useTranslate } from "@probo/i18n";
+import {
+  Breadcrumb,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  Select,
+  Option,
+  Textarea,
+  useDialogRef,
+  Badge,
+} from "@probo/ui";
+import { forwardRef, useImperativeHandle, useState } from "react";
+import { graphql } from "react-relay";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+
+const linkControlMutation = graphql`
+  mutation EditControlDialogLinkMutation($input: CreateStateOfApplicabilityControlMappingInput!) {
+    createStateOfApplicabilityControlMapping(input: $input) {
+      stateOfApplicabilityControlEdge {
+        node {
+          stateOfApplicabilityId
+          controlId
+          applicability
+          justification
+        }
+      }
+    }
+  }
+`;
+
+export type EditControlDialogRef = {
+  open: (control: {
+    stateOfApplicabilityId: string;
+    controlId: string;
+    sectionTitle: string;
+    name: string;
+    frameworkName: string;
+    applicability: boolean;
+    justification: string | null;
+  }) => void;
+};
+
+const schema = z.object({
+  applicability: z.boolean(),
+  justification: z.string().optional(),
+});
+
+export const EditControlDialog = forwardRef<EditControlDialogRef, { onSuccess?: () => void }>(
+  ({ onSuccess }, ref) => {
+    const { __ } = useTranslate();
+    const dialogRef = useDialogRef();
+    const [control, setControl] = useState<{
+      stateOfApplicabilityId: string;
+      controlId: string;
+      sectionTitle: string;
+      name: string;
+      frameworkName: string;
+      applicability: boolean;
+      justification: string | null;
+    } | null>(null);
+
+    const [linkMutate, isLinking] = useMutationWithToasts(linkControlMutation, {
+      successMessage: __("Control updated successfully."),
+      errorMessage: __("Failed to update control"),
+    });
+
+    const { register, handleSubmit, setValue, watch } = useFormWithSchema(schema, {
+      defaultValues: {
+        applicability: true,
+        justification: "",
+      },
+    });
+    const applicability = watch("applicability");
+
+    useImperativeHandle(ref, () => ({
+      open: (ctrl) => {
+        setControl(ctrl);
+        setValue("applicability", ctrl.applicability);
+        setValue("justification", ctrl.justification || "");
+        dialogRef.current?.open();
+      },
+    }));
+
+    const onSubmit = handleSubmit((data) => {
+      if (!control) return;
+
+      linkMutate({
+        variables: {
+          input: {
+            stateOfApplicabilityId: control.stateOfApplicabilityId,
+            controlId: control.controlId,
+            applicability: data.applicability,
+            justification: !data.applicability ? data.justification || null : null,
+          },
+        },
+        onSuccess: () => {
+          dialogRef.current?.close();
+          setControl(null);
+          onSuccess?.();
+        },
+        updater: (store) => {
+          const stateOfApplicability = store.get(control.stateOfApplicabilityId);
+          if (stateOfApplicability) {
+            stateOfApplicability.invalidateRecord();
+          }
+        },
+      });
+    });
+
+    return (
+      <Dialog
+        ref={dialogRef}
+        className="max-w-lg"
+        title={
+          <Breadcrumb
+            items={[__("States of Applicability"), __("Edit Control")]}
+          />
+        }
+      >
+        {control ? (
+          <form onSubmit={onSubmit}>
+            <DialogContent padded className="space-y-4">
+              <div className="space-y-2">
+                <div className="text-sm font-medium text-txt-secondary">
+                  {control.frameworkName}
+                </div>
+                <div className="flex items-center gap-2">
+                  <Badge size="md">{control.sectionTitle}</Badge>
+                  <span className="text-base font-medium text-txt-primary">{control.name}</span>
+                </div>
+              </div>
+
+              <Field label={__("Applicability")}>
+                <Select
+                  variant="editor"
+                  value={applicability ? "yes" : "no"}
+                  onValueChange={(value) => setValue("applicability", value === "yes")}
+                >
+                  <Option value="yes">{__("Yes")}</Option>
+                  <Option value="no">{__("No")}</Option>
+                </Select>
+              </Field>
+
+              {!applicability && (
+                <Field label={__("Justification")}>
+                  <Textarea
+                    {...register("justification")}
+                    placeholder={__("Reason for non-applicability")}
+                    autogrow
+                  />
+                </Field>
+              )}
+            </DialogContent>
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={() => dialogRef.current?.close()}
+              >
+                {__("Cancel")}
+              </Button>
+              <Button type="submit" disabled={isLinking}>
+                {__("Save")}
+              </Button>
+            </DialogFooter>
+          </form>
+        ) : null}
+      </Dialog>
+    );
+  }
+);

apps/console/src/pages/organizations/states-of-applicability/dialogs/LinkControlDialog.tsx

@@ -0,0 +1,385 @@
+import { useTranslate } from "@probo/i18n";
+import {
+  Breadcrumb,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Select,
+  Option,
+  Textarea,
+  useDialogRef,
+  Spinner,
+  Badge,
+  Input,
+  IconMagnifyingGlass,
+  IconChevronDown,
+  IconChevronUp,
+  IconCheckmark1,
+} from "@probo/ui";
+import { forwardRef, useImperativeHandle, useState, Suspense, useMemo } from "react";
+import { useLazyLoadQuery } from "react-relay";
+import { graphql } from "react-relay";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+
+const linkControlQuery = graphql`
+  query LinkControlDialogQuery($stateOfApplicabilityId: ID!) {
+    node(id: $stateOfApplicabilityId) {
+      ... on StateOfApplicability {
+        id
+        availableControls {
+          controlId
+          sectionTitle
+          name
+          frameworkId
+          frameworkName
+          organizationId
+          stateOfApplicabilityId
+          applicability
+          justification
+        }
+      }
+    }
+  }
+`;
+
+const linkControlMutation = graphql`
+  mutation LinkControlDialogLinkMutation($input: CreateStateOfApplicabilityControlMappingInput!) {
+    createStateOfApplicabilityControlMapping(input: $input) {
+      stateOfApplicabilityControlEdge {
+        node {
+          stateOfApplicabilityId
+          controlId
+          applicability
+          justification
+        }
+      }
+    }
+  }
+`;
+
+const unlinkControlMutation = graphql`
+  mutation LinkControlDialogUnlinkMutation($input: DeleteStateOfApplicabilityControlMappingInput!) {
+    deleteStateOfApplicabilityControlMapping(input: $input) {
+      deletedStateOfApplicabilityId
+      deletedControlId
+      deletedStateOfApplicabilityControlId
+    }
+  }
+`;
+
+export type LinkControlDialogRef = {
+  open: (stateOfApplicabilityId: string, onUpdate?: () => void) => void;
+};
+
+type Control = {
+  controlId: string;
+  sectionTitle: string;
+  name: string;
+  frameworkId: string;
+  frameworkName: string;
+  organizationId: string;
+  stateOfApplicabilityId: string | null;
+  applicability: boolean | null;
+  justification: string | null;
+};
+
+function ControlRow({
+  control,
+  stateOfApplicabilityId,
+  isLinked,
+  onUpdate,
+}: {
+  control: Control;
+  stateOfApplicabilityId: string;
+  isLinked: boolean;
+  onUpdate?: () => void;
+}) {
+  const { __ } = useTranslate();
+  const [selectedState, setSelectedState] = useState<string>(() => {
+    if (!isLinked) return "not-linked";
+    return control.applicability ? "applicable" : "not-applicable";
+  });
+  const [justification, setJustification] = useState(
+    control.justification || ""
+  );
+  const [showJustification, setShowJustification] = useState(false);
+
+  const [linkMutate, isLinking] = useMutationWithToasts(linkControlMutation, {
+    successMessage: __("Control updated successfully."),
+    errorMessage: __("Failed to update control"),
+  });
+
+  const [unlinkMutate, isUnlinking] = useMutationWithToasts(unlinkControlMutation, {
+    successMessage: __("Control removed successfully."),
+    errorMessage: __("Failed to remove control"),
+  });
+
+  const handleStateChange = (newState: string) => {
+    setSelectedState(newState);
+
+    if (newState === "not-linked") {
+      unlinkMutate({
+        variables: {
+          input: {
+            stateOfApplicabilityId,
+            controlId: control.controlId,
+          },
+        },
+        onSuccess: () => {
+          setShowJustification(false);
+          onUpdate?.();
+        },
+      });
+    } else if (newState === "applicable") {
+      setShowJustification(false);
+      linkMutate({
+        variables: {
+          input: {
+            stateOfApplicabilityId,
+            controlId: control.controlId,
+            applicability: true,
+            justification: null,
+          },
+        },
+        onSuccess: () => {
+          onUpdate?.();
+        },
+      });
+    } else if (newState === "not-applicable") {
+      setShowJustification(true);
+      setJustification(control.justification || "");
+    }
+  };
+
+  const handleSaveJustification = () => {
+    linkMutate({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          controlId: control.controlId,
+          applicability: false,
+          justification: justification || null,
+        },
+      },
+      onSuccess: () => {
+        setShowJustification(false);
+        onUpdate?.();
+      },
+    });
+  };
+
+  return (
+    <div className="p-4 border-b border-border-low">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <Badge size="md">{control.sectionTitle}</Badge>
+            <span className="text-sm font-medium text-txt-primary">{control.name}</span>
+          </div>
+          {isLinked && control.applicability !== null && !showJustification && control.justification && (
+            <div className="mt-2 text-sm text-txt-secondary">
+              {control.justification}
+            </div>
+          )}
+        </div>
+        <div className="flex items-start gap-2">
+          <Select
+            variant="editor"
+            value={selectedState}
+            onValueChange={handleStateChange}
+            disabled={isLinking || isUnlinking}
+            className="w-48"
+          >
+            <Option value="not-linked">
+              {__("Not Linked")}
+            </Option>
+            <Option value="applicable">
+              {__("Applicable")}
+            </Option>
+            <Option value="not-applicable">
+              {__("Not Applicable")}
+            </Option>
+          </Select>
+        </div>
+      </div>
+      {showJustification && (
+        <div className="mt-3 flex items-start gap-2">
+          <Textarea
+            value={justification}
+            onChange={(e) => setJustification(e.target.value)}
+            placeholder={__("Reason for non-applicability")}
+            className="flex-1"
+            autogrow
+          />
+          <Button
+            variant="primary"
+            icon={IconCheckmark1}
+            onClick={handleSaveJustification}
+            disabled={isLinking}
+            aria-label={__("Save")}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function LinkControlDialogContent({
+  stateOfApplicabilityId,
+  onUpdate,
+}: {
+  stateOfApplicabilityId: string;
+  onUpdate?: () => void;
+}) {
+  const { __ } = useTranslate();
+  const [search, setSearch] = useState("");
+  const [collapsedFrameworks, setCollapsedFrameworks] = useState<Set<string>>(new Set());
+  const data = useLazyLoadQuery(
+    linkControlQuery,
+    { stateOfApplicabilityId },
+    { fetchPolicy: "store-or-network" }
+  ) as {
+    node: {
+      availableControls?: Control[];
+    } | null;
+  };
+
+  const filteredControls = useMemo(() => {
+    const controls = data.node?.availableControls || [];
+    if (!search) return controls;
+    const lowerSearch = search.toLowerCase();
+    return controls.filter(
+      (c) =>
+        c.name.toLowerCase().includes(lowerSearch) ||
+        c.sectionTitle.toLowerCase().includes(lowerSearch) ||
+        c.frameworkName.toLowerCase().includes(lowerSearch)
+    );
+  }, [data.node?.availableControls, search]);
+
+  const groupedControls = useMemo(() => {
+    const groups: Record<string, Record<string, Control[]>> = {};
+    filteredControls.forEach((control) => {
+      if (!groups[control.frameworkName]) {
+        groups[control.frameworkName] = {};
+      }
+      if (!groups[control.frameworkName][control.sectionTitle]) {
+        groups[control.frameworkName][control.sectionTitle] = [];
+      }
+      groups[control.frameworkName][control.sectionTitle].push(control);
+    });
+    return groups;
+  }, [filteredControls]);
+
+  const toggleFramework = (frameworkName: string) => {
+    setCollapsedFrameworks((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(frameworkName)) {
+        newSet.delete(frameworkName);
+      } else {
+        newSet.add(frameworkName);
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <>
+      <DialogContent className="p-0">
+        <div className="sticky top-0 bg-level-2 p-4 border-b border-border-low z-10">
+          <Input
+            icon={IconMagnifyingGlass}
+            placeholder={__("Search controls...")}
+            onValueChange={setSearch}
+          />
+        </div>
+        <div className="max-h-[60vh] overflow-y-auto">
+          {filteredControls.length === 0 ? (
+            <div className="p-8 text-center text-txt-secondary">
+              {__("No controls found")}
+            </div>
+          ) : (
+            Object.entries(groupedControls).map(([frameworkName, sections]) => {
+              const isCollapsed = collapsedFrameworks.has(frameworkName);
+              return (
+                <div key={frameworkName}>
+                  <div className="sticky top-0 bg-level-1 px-4 py-2 border-b border-border-low z-10 flex items-center justify-between">
+                    <h3 className="text-sm font-semibold text-txt-primary">{frameworkName}</h3>
+                    <Button
+                      variant="tertiary"
+                      icon={isCollapsed ? IconChevronDown : IconChevronUp}
+                      onClick={() => toggleFramework(frameworkName)}
+                      aria-label={isCollapsed ? __("Expand") : __("Collapse")}
+                    />
+                  </div>
+                  {!isCollapsed && Object.entries(sections).map(([sectionTitle, sectionControls]) => (
+                    <div key={`${frameworkName}-${sectionTitle}`}>
+                      {sectionControls.map((control) => (
+                        <ControlRow
+                          key={control.controlId}
+                          control={control}
+                          stateOfApplicabilityId={stateOfApplicabilityId}
+                          isLinked={control.stateOfApplicabilityId !== null}
+                          onUpdate={onUpdate}
+                        />
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </DialogContent>
+      <DialogFooter exitLabel={__("Close")}></DialogFooter>
+    </>
+  );
+}
+
+export const LinkControlDialog = forwardRef<LinkControlDialogRef>((_props, ref) => {
+  const { __ } = useTranslate();
+  const dialogRef = useDialogRef();
+  const [stateOfApplicabilityId, setStateOfApplicabilityId] = useState<string | null>(null);
+  const [onUpdateCallback, setOnUpdateCallback] = useState<(() => void) | undefined>(undefined);
+
+  useImperativeHandle(ref, () => ({
+    open: (soaId: string, callback?: () => void) => {
+      setStateOfApplicabilityId(soaId);
+      setOnUpdateCallback(() => callback);
+      dialogRef.current?.open();
+    },
+  }), [dialogRef]);
+
+  const handleClose = () => {
+    setStateOfApplicabilityId(null);
+    setOnUpdateCallback(undefined);
+  };
+
+  return (
+    <Dialog
+      ref={dialogRef}
+      className="max-w-3xl"
+      title={
+        <Breadcrumb
+          items={[__("States of Applicability"), __("Add Controls")]}
+        />
+      }
+      onClose={handleClose}
+    >
+      {stateOfApplicabilityId ? (
+        <Suspense
+          fallback={
+            <DialogContent padded className="flex items-center justify-center py-8">
+              <Spinner />
+            </DialogContent>
+          }
+        >
+          <LinkControlDialogContent
+            stateOfApplicabilityId={stateOfApplicabilityId}
+            onUpdate={onUpdateCallback}
+          />
+        </Suspense>
+      ) : null}
+    </Dialog>
+  );
+});

apps/console/src/pages/organizations/states-of-applicability/dialogs/__generated__/EditControlDialogLinkMutation.graphql.ts

@@ -0,0 +1,194 @@
+/**
+ * @generated SignedSource<<100330ea65f9914591271a9a1f78fd2e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreateStateOfApplicabilityControlMappingInput = {
+  applicability: boolean;
+  controlId: string;
+  justification?: string | null | undefined;
+  stateOfApplicabilityId: string;
+};
+export type EditControlDialogLinkMutation$variables = {
+  input: CreateStateOfApplicabilityControlMappingInput;
+};
+export type EditControlDialogLinkMutation$data = {
+  readonly createStateOfApplicabilityControlMapping: {
+    readonly stateOfApplicabilityControlEdge: {
+      readonly node: {
+        readonly applicability: boolean;
+        readonly controlId: string;
+        readonly justification: string | null | undefined;
+        readonly stateOfApplicabilityId: string;
+      };
+    };
+  };
+};
+export type EditControlDialogLinkMutation = {
+  response: EditControlDialogLinkMutation$data;
+  variables: EditControlDialogLinkMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "stateOfApplicabilityId",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "controlId",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "applicability",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "justification",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditControlDialogLinkMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/)
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditControlDialogLinkMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "id",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "e15d97ea6b798532fb82fc577cbccd64",
+    "id": null,
+    "metadata": {},
+    "name": "EditControlDialogLinkMutation",
+    "operationKind": "mutation",
+    "text": "mutation EditControlDialogLinkMutation(\n  $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n  createStateOfApplicabilityControlMapping(input: $input) {\n    stateOfApplicabilityControlEdge {\n      node {\n        stateOfApplicabilityId\n        controlId\n        applicability\n        justification\n        id\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e7a83ce3daa0051a0b2bb03b0429f2c4";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/dialogs/__generated__/LinkControlDialogLinkMutation.graphql.ts

@@ -0,0 +1,194 @@
+/**
+ * @generated SignedSource<<ab6168a4560a52cdd137c9090c37dacc>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreateStateOfApplicabilityControlMappingInput = {
+  applicability: boolean;
+  controlId: string;
+  justification?: string | null | undefined;
+  stateOfApplicabilityId: string;
+};
+export type LinkControlDialogLinkMutation$variables = {
+  input: CreateStateOfApplicabilityControlMappingInput;
+};
+export type LinkControlDialogLinkMutation$data = {
+  readonly createStateOfApplicabilityControlMapping: {
+    readonly stateOfApplicabilityControlEdge: {
+      readonly node: {
+        readonly applicability: boolean;
+        readonly controlId: string;
+        readonly justification: string | null | undefined;
+        readonly stateOfApplicabilityId: string;
+      };
+    };
+  };
+};
+export type LinkControlDialogLinkMutation = {
+  response: LinkControlDialogLinkMutation$data;
+  variables: LinkControlDialogLinkMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "input",
+    "variableName": "input"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "stateOfApplicabilityId",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "controlId",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "applicability",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "justification",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "LinkControlDialogLinkMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/)
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "LinkControlDialogLinkMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": "CreateStateOfApplicabilityControlMappingPayload",
+        "kind": "LinkedField",
+        "name": "createStateOfApplicabilityControlMapping",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "StateOfApplicabilityControlEdge",
+            "kind": "LinkedField",
+            "name": "stateOfApplicabilityControlEdge",
+            "plural": false,
+            "selections": [
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "StateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "node",
+                "plural": false,
+                "selections": [
+                  (v2/*: any*/),
+                  (v3/*: any*/),
+                  (v4/*: any*/),
+                  (v5/*: any*/),
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "id",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "59e215d4f18e0429cbf813aae4db8c94",
+    "id": null,
+    "metadata": {},
+    "name": "LinkControlDialogLinkMutation",
+    "operationKind": "mutation",
+    "text": "mutation LinkControlDialogLinkMutation(\n  $input: CreateStateOfApplicabilityControlMappingInput!\n) {\n  createStateOfApplicabilityControlMapping(input: $input) {\n    stateOfApplicabilityControlEdge {\n      node {\n        stateOfApplicabilityId\n        controlId\n        applicability\n        justification\n        id\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "47757e096c6beeba6be6290a2154f841";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/dialogs/__generated__/LinkControlDialogQuery.graphql.ts

@@ -0,0 +1,211 @@
+/**
+ * @generated SignedSource<<feca91fd2418eba0f5714a2c76346d08>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type LinkControlDialogQuery$variables = {
+  stateOfApplicabilityId: string;
+};
+export type LinkControlDialogQuery$data = {
+  readonly node: {
+    readonly availableControls?: ReadonlyArray<{
+      readonly applicability: boolean | null | undefined;
+      readonly controlId: string;
+      readonly frameworkId: string;
+      readonly frameworkName: string;
+      readonly justification: string | null | undefined;
+      readonly name: string;
+      readonly organizationId: string;
+      readonly sectionTitle: string;
+      readonly stateOfApplicabilityId: string | null | undefined;
+    }>;
+    readonly id?: string;
+  };
+};
+export type LinkControlDialogQuery = {
+  response: LinkControlDialogQuery$data;
+  variables: LinkControlDialogQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "stateOfApplicabilityId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "stateOfApplicabilityId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "concreteType": "AvailableStateOfApplicabilityControl",
+  "kind": "LinkedField",
+  "name": "availableControls",
+  "plural": true,
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "controlId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "sectionTitle",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "name",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "frameworkId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "frameworkName",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "organizationId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "stateOfApplicabilityId",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "applicability",
+      "storageKey": null
+    },
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "justification",
+      "storageKey": null
+    }
+  ],
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "LinkControlDialogQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/)
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "LinkControlDialogQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v3/*: any*/)
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "a0d70e15a1236fe0e8626e685ea16a15",
+    "id": null,
+    "metadata": {},
+    "name": "LinkControlDialogQuery",
+    "operationKind": "query",
+    "text": "query LinkControlDialogQuery(\n  $stateOfApplicabilityId: ID!\n) {\n  node(id: $stateOfApplicabilityId) {\n    __typename\n    ... on StateOfApplicability {\n      id\n      availableControls {\n        controlId\n        sectionTitle\n        name\n        frameworkId\n        frameworkName\n        organizationId\n        stateOfApplicabilityId\n        applicability\n        justification\n      }\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "26daf3c064517bdbbf025da7ce5fc30f";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/dialogs/__generated__/LinkControlDialogUnlinkMutation.graphql.ts

@@ -0,0 +1,109 @@
+/**
+ * @generated SignedSource<<3bb4d04e228ac7dbda8ebfb8b7c2567f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteStateOfApplicabilityControlMappingInput = {
+  controlId: string;
+  stateOfApplicabilityId: string;
+};
+export type LinkControlDialogUnlinkMutation$variables = {
+  input: DeleteStateOfApplicabilityControlMappingInput;
+};
+export type LinkControlDialogUnlinkMutation$data = {
+  readonly deleteStateOfApplicabilityControlMapping: {
+    readonly deletedControlId: string;
+    readonly deletedStateOfApplicabilityControlId: string;
+    readonly deletedStateOfApplicabilityId: string;
+  };
+};
+export type LinkControlDialogUnlinkMutation = {
+  response: LinkControlDialogUnlinkMutation$data;
+  variables: LinkControlDialogUnlinkMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
+    "kind": "LinkedField",
+    "name": "deleteStateOfApplicabilityControlMapping",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedStateOfApplicabilityId",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedControlId",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedStateOfApplicabilityControlId",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "LinkControlDialogUnlinkMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "LinkControlDialogUnlinkMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "766d15d5071197ed2907d876caf37995",
+    "id": null,
+    "metadata": {},
+    "name": "LinkControlDialogUnlinkMutation",
+    "operationKind": "mutation",
+    "text": "mutation LinkControlDialogUnlinkMutation(\n  $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n  deleteStateOfApplicabilityControlMapping(input: $input) {\n    deletedStateOfApplicabilityId\n    deletedControlId\n    deletedStateOfApplicabilityControlId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "a184d521b495bf3ff76796530e9eb0e1";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityControlsTab.tsx

@@ -0,0 +1,267 @@
+import { graphql, useRefetchableFragment } from "react-relay";
+import { Badge, Table, Tbody, Td, Th, Thead, Tr, Button, IconPlusLarge, IconPencil, IconTrashCan, ActionDropdown, DropdownItem } from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { useOrganizationId } from "/hooks/useOrganizationId";
+import type { StateOfApplicabilityControlsTabFragment$key } from "./__generated__/StateOfApplicabilityControlsTabFragment.graphql";
+import { Suspense, useMemo, useRef } from "react";
+import { LinkControlDialog, type LinkControlDialogRef } from "../dialogs/LinkControlDialog";
+import { EditControlDialog, type EditControlDialogRef } from "../dialogs/EditControlDialog";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { use } from "react";
+import { PermissionsContext } from "/providers/PermissionsContext";
+
+export const controlsFragment = graphql`
+  fragment StateOfApplicabilityControlsTabFragment on StateOfApplicability
+  @refetchable(queryName: "StateOfApplicabilityControlsTabRefetchQuery") {
+    id
+    controlsInfo: controls(first: 0) {
+      totalCount
+    }
+    availableControls {
+      controlId
+      sectionTitle
+      name
+      frameworkId
+      frameworkName
+      organizationId
+      stateOfApplicabilityId
+      applicability
+      justification
+      bestPractice
+      regulatory
+      contractual
+      riskAssessment
+    }
+  }
+`;
+
+const unlinkControlMutation = graphql`
+  mutation StateOfApplicabilityControlsTabUnlinkMutation($input: DeleteStateOfApplicabilityControlMappingInput!) {
+    deleteStateOfApplicabilityControlMapping(input: $input) {
+      deletedStateOfApplicabilityId
+      deletedControlId
+      deletedStateOfApplicabilityControlId
+    }
+  }
+`;
+
+export default function StateOfApplicabilityControlsTab({
+  stateOfApplicability,
+  isSnapshotMode = false,
+}: {
+  stateOfApplicability: StateOfApplicabilityControlsTabFragment$key & { id: string };
+  isSnapshotMode?: boolean;
+}) {
+  const { __ } = useTranslate();
+  const [data, refetch] = useRefetchableFragment(controlsFragment, stateOfApplicability);
+  const organizationId = useOrganizationId();
+  const manageDialogRef = useRef<LinkControlDialogRef>(null);
+  const editDialogRef = useRef<EditControlDialogRef>(null);
+  const { isAuthorized } = use(PermissionsContext);
+
+  const linkedControls = useMemo(
+    () => (data.availableControls || []).filter((c) => c.stateOfApplicabilityId !== null),
+    [data.availableControls]
+  );
+
+  const [unlinkControl, isUnlinking] = useMutationWithToasts(
+    unlinkControlMutation,
+    {
+      successMessage: __("Control removed successfully."),
+      errorMessage: __("Failed to remove control"),
+    },
+  );
+
+  const canLink = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
+  const canUnlink = !isSnapshotMode && isAuthorized("StateOfApplicability", "updateStateOfApplicability");
+
+  const handleOpenManageDialog = () => {
+    manageDialogRef.current?.open(data.id, () => {
+      refetch({}, { fetchPolicy: "store-and-network" });
+    });
+  };
+
+  const handleOpenEditDialog = (control: {
+    controlId: string;
+    sectionTitle: string;
+    name: string;
+    frameworkName: string;
+    applicability: boolean;
+    justification: string | null;
+  }) => {
+    editDialogRef.current?.open({
+      stateOfApplicabilityId: data.id,
+      controlId: control.controlId,
+      sectionTitle: control.sectionTitle,
+      name: control.name,
+      frameworkName: control.frameworkName,
+      applicability: control.applicability,
+      justification: control.justification,
+    });
+  };
+
+  const handleUnlink = (controlId: string) => {
+    unlinkControl({
+      variables: {
+        input: {
+          stateOfApplicabilityId: data.id,
+          controlId,
+        },
+      },
+      onSuccess: () => {
+        refetch({}, { fetchPolicy: "network-only" });
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="space-y-4">
+        {canLink && (
+          <div className="flex justify-end">
+            <Button
+              icon={IconPlusLarge}
+              onClick={handleOpenManageDialog}
+            >
+              {__("Add Controls")}
+            </Button>
+          </div>
+        )}
+
+        <Table>
+          <Thead>
+            <Tr>
+              <Th className="w-32">{__("Framework")}</Th>
+              <Th>{__("Control")}</Th>
+              <Th className="w-28 text-center">{__("Applicability")}</Th>
+              <Th className="min-w-48">{__("Justification")}</Th>
+              <Th className="w-24 text-center">{__("Regulatory")}</Th>
+              <Th className="w-24 text-center">{__("Contractual")}</Th>
+              <Th className="w-32 text-center">{__("Best Practice")}</Th>
+              <Th className="w-36 text-center">{__("Risk Assessment")}</Th>
+              {(canLink || canUnlink) && <Th className="w-12"></Th>}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {linkedControls.length === 0 && (
+              <Tr>
+                <Td colSpan={canLink || canUnlink ? 9 : 8} className="text-center text-txt-secondary py-12">
+                  {__("No controls linked")}
+                </Td>
+              </Tr>
+            )}
+            {linkedControls.map((control) => (
+              <Tr
+                key={control.controlId}
+                to={`/organizations/${organizationId}/frameworks/${control.frameworkId}/controls/${control.controlId}`}
+              >
+                <Td className="font-medium text-txt-secondary">{control.frameworkName}</Td>
+                <Td>
+                  <div className="space-y-1">
+                    <div className="text-xs font-medium text-txt-tertiary">{control.sectionTitle}</div>
+                    <div className="text-sm">{control.name}</div>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    {control.applicability !== null ? (
+                      <Badge variant={control.applicability ? "success" : "danger"} size="sm">
+                        {control.applicability ? __("Yes") : __("No")}
+                      </Badge>
+                    ) : (
+                      <span className="text-txt-tertiary">-</span>
+                    )}
+                  </div>
+                </Td>
+                <Td>
+                  <div className="text-sm text-txt-secondary line-clamp-2">
+                    {control.justification || <span className="text-txt-tertiary italic">-</span>}
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge variant={control.regulatory ? "success" : "danger"} size="sm">
+                      {control.regulatory ? __("Yes") : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge variant={control.contractual ? "success" : "danger"} size="sm">
+                      {control.contractual ? __("Yes") : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge variant={control.bestPractice ? "success" : "danger"} size="sm">
+                      {control.bestPractice ? __("Yes") : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                <Td>
+                  <div className="flex justify-center">
+                    <Badge variant={control.riskAssessment ? "success" : "danger"} size="sm">
+                      {control.riskAssessment ? __("Yes") : __("No")}
+                    </Badge>
+                  </div>
+                </Td>
+                {(canLink || canUnlink) && (
+                  <Td noLink className="text-end">
+                    <ActionDropdown>
+                      {canLink && (
+                        <DropdownItem
+                          icon={IconPencil}
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (typeof control.applicability === 'boolean') {
+                              handleOpenEditDialog({
+                                controlId: control.controlId,
+                                sectionTitle: control.sectionTitle,
+                                name: control.name,
+                                frameworkName: control.frameworkName,
+                                applicability: control.applicability,
+                                justification: control.justification ?? null,
+                              });
+                            }
+                          }}
+                        >
+                          {__("Edit")}
+                        </DropdownItem>
+                      )}
+                      {canUnlink && (
+                        <DropdownItem
+                          icon={IconTrashCan}
+                          variant="danger"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            handleUnlink(control.controlId);
+                          }}
+                          disabled={isUnlinking}
+                        >
+                          {__("Remove")}
+                        </DropdownItem>
+                      )}
+                    </ActionDropdown>
+                  </Td>
+                )}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </div>
+
+      <Suspense fallback={null}>
+        <LinkControlDialog ref={manageDialogRef} />
+        <EditControlDialog
+          ref={editDialogRef}
+          onSuccess={() => {
+            refetch({}, { fetchPolicy: "network-only" });
+          }}
+        />
+      </Suspense>
+    </>
+  );
+}

apps/console/src/pages/organizations/states-of-applicability/tabs/StateOfApplicabilityOverviewTab.tsx

@@ -0,0 +1,51 @@
+import { useOutletContext } from "react-router";
+import { Card, Field } from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { formatDate } from "@probo/helpers";
+import type { StateOfApplicabilityGraphNodeQuery$data } from "/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql";
+
+type StateOfApplicabilityNode = NonNullable<StateOfApplicabilityGraphNodeQuery$data["node"]>;
+
+export default function StateOfApplicabilityOverviewTab() {
+  const { stateOfApplicability } = useOutletContext<{
+    stateOfApplicability: StateOfApplicabilityNode;
+  }>();
+  const { __ } = useTranslate();
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-base font-medium">{__("State of Applicability details")}</h2>
+      <Card className="space-y-4" padded>
+        <Field
+          label={__("Name")}
+          value={stateOfApplicability.name}
+          disabled
+        />
+        {stateOfApplicability.sourceId && (
+          <Field
+            label={__("Source")}
+            value={stateOfApplicability.sourceId}
+            disabled
+          />
+        )}
+        {stateOfApplicability.snapshotId && (
+          <Field
+            label={__("Snapshot")}
+            value={stateOfApplicability.snapshotId}
+            disabled
+          />
+        )}
+        <Field
+          label={__("Created at")}
+          value={formatDate(stateOfApplicability.createdAt)}
+          disabled
+        />
+        <Field
+          label={__("Updated at")}
+          value={formatDate(stateOfApplicability.updatedAt)}
+          disabled
+        />
+      </Card>
+    </div>
+  );
+}

apps/console/src/pages/organizations/states-of-applicability/tabs/__generated__/StateOfApplicabilityControlsTabFragment.graphql.ts

@@ -0,0 +1,200 @@
+/**
+ * @generated SignedSource<<306449631752d4277aa96b77601e2d8f>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type StateOfApplicabilityControlsTabFragment$data = {
+  readonly availableControls: ReadonlyArray<{
+    readonly applicability: boolean | null | undefined;
+    readonly bestPractice: boolean;
+    readonly contractual: boolean;
+    readonly controlId: string;
+    readonly frameworkId: string;
+    readonly frameworkName: string;
+    readonly justification: string | null | undefined;
+    readonly name: string;
+    readonly organizationId: string;
+    readonly regulatory: boolean;
+    readonly riskAssessment: boolean;
+    readonly sectionTitle: string;
+    readonly stateOfApplicabilityId: string | null | undefined;
+  }>;
+  readonly controlsInfo: {
+    readonly totalCount: number;
+  };
+  readonly id: string;
+  readonly " $fragmentType": "StateOfApplicabilityControlsTabFragment";
+};
+export type StateOfApplicabilityControlsTabFragment$key = {
+  readonly " $data"?: StateOfApplicabilityControlsTabFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityControlsTabFragment">;
+};
+
+import StateOfApplicabilityControlsTabRefetchQuery_graphql from './StateOfApplicabilityControlsTabRefetchQuery.graphql';
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": {
+    "refetch": {
+      "connection": null,
+      "fragmentPathInResult": [
+        "node"
+      ],
+      "operation": StateOfApplicabilityControlsTabRefetchQuery_graphql,
+      "identifierInfo": {
+        "identifierField": "id",
+        "identifierQueryVariableName": "id"
+      }
+    }
+  },
+  "name": "StateOfApplicabilityControlsTabFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "id",
+      "storageKey": null
+    },
+    {
+      "alias": "controlsInfo",
+      "args": [
+        {
+          "kind": "Literal",
+          "name": "first",
+          "value": 0
+        }
+      ],
+      "concreteType": "ControlConnection",
+      "kind": "LinkedField",
+      "name": "controls",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "totalCount",
+          "storageKey": null
+        }
+      ],
+      "storageKey": "controls(first:0)"
+    },
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "AvailableStateOfApplicabilityControl",
+      "kind": "LinkedField",
+      "name": "availableControls",
+      "plural": true,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "controlId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "sectionTitle",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "name",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "frameworkId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "frameworkName",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "organizationId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "stateOfApplicabilityId",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "applicability",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "justification",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "bestPractice",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "regulatory",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "contractual",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "riskAssessment",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "StateOfApplicability",
+  "abstractKey": null
+};
+
+(node as any).hash = "e72695289b29d1a4b60e3f7c18ba1165";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/tabs/__generated__/StateOfApplicabilityControlsTabRefetchQuery.graphql.ts

@@ -0,0 +1,247 @@
+/**
+ * @generated SignedSource<<06d34888ed5b3e0d66f2159e1a916196>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type StateOfApplicabilityControlsTabRefetchQuery$variables = {
+  id: string;
+};
+export type StateOfApplicabilityControlsTabRefetchQuery$data = {
+  readonly node: {
+    readonly " $fragmentSpreads": FragmentRefs<"StateOfApplicabilityControlsTabFragment">;
+  };
+};
+export type StateOfApplicabilityControlsTabRefetchQuery = {
+  response: StateOfApplicabilityControlsTabRefetchQuery$data;
+  variables: StateOfApplicabilityControlsTabRefetchQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "id"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "id"
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityControlsTabRefetchQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "args": null,
+            "kind": "FragmentSpread",
+            "name": "StateOfApplicabilityControlsTabFragment"
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityControlsTabRefetchQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          },
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              {
+                "alias": "controlsInfo",
+                "args": [
+                  {
+                    "kind": "Literal",
+                    "name": "first",
+                    "value": 0
+                  }
+                ],
+                "concreteType": "ControlConnection",
+                "kind": "LinkedField",
+                "name": "controls",
+                "plural": false,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "totalCount",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": "controls(first:0)"
+              },
+              {
+                "alias": null,
+                "args": null,
+                "concreteType": "AvailableStateOfApplicabilityControl",
+                "kind": "LinkedField",
+                "name": "availableControls",
+                "plural": true,
+                "selections": [
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "controlId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "sectionTitle",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "name",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "frameworkId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "frameworkName",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "organizationId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "stateOfApplicabilityId",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "applicability",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "justification",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "bestPractice",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "regulatory",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "contractual",
+                    "storageKey": null
+                  },
+                  {
+                    "alias": null,
+                    "args": null,
+                    "kind": "ScalarField",
+                    "name": "riskAssessment",
+                    "storageKey": null
+                  }
+                ],
+                "storageKey": null
+              }
+            ],
+            "type": "StateOfApplicability",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "50874b763d9f2cfc01d097ec9b68ec82",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityControlsTabRefetchQuery",
+    "operationKind": "query",
+    "text": "query StateOfApplicabilityControlsTabRefetchQuery(\n  $id: ID!\n) {\n  node(id: $id) {\n    __typename\n    ...StateOfApplicabilityControlsTabFragment\n    id\n  }\n}\n\nfragment StateOfApplicabilityControlsTabFragment on StateOfApplicability {\n  id\n  controlsInfo: controls(first: 0) {\n    totalCount\n  }\n  availableControls {\n    controlId\n    sectionTitle\n    name\n    frameworkId\n    frameworkName\n    organizationId\n    stateOfApplicabilityId\n    applicability\n    justification\n    bestPractice\n    regulatory\n    contractual\n    riskAssessment\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e72695289b29d1a4b60e3f7c18ba1165";
+
+export default node;

apps/console/src/pages/organizations/states-of-applicability/tabs/__generated__/StateOfApplicabilityControlsTabUnlinkMutation.graphql.ts

@@ -0,0 +1,109 @@
+/**
+ * @generated SignedSource<<a9742800c22e683eb17d46d52b7d6aa5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteStateOfApplicabilityControlMappingInput = {
+  controlId: string;
+  stateOfApplicabilityId: string;
+};
+export type StateOfApplicabilityControlsTabUnlinkMutation$variables = {
+  input: DeleteStateOfApplicabilityControlMappingInput;
+};
+export type StateOfApplicabilityControlsTabUnlinkMutation$data = {
+  readonly deleteStateOfApplicabilityControlMapping: {
+    readonly deletedControlId: string;
+    readonly deletedStateOfApplicabilityControlId: string;
+    readonly deletedStateOfApplicabilityId: string;
+  };
+};
+export type StateOfApplicabilityControlsTabUnlinkMutation = {
+  response: StateOfApplicabilityControlsTabUnlinkMutation$data;
+  variables: StateOfApplicabilityControlsTabUnlinkMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "DeleteStateOfApplicabilityControlMappingPayload",
+    "kind": "LinkedField",
+    "name": "deleteStateOfApplicabilityControlMapping",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedStateOfApplicabilityId",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedControlId",
+        "storageKey": null
+      },
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedStateOfApplicabilityControlId",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "StateOfApplicabilityControlsTabUnlinkMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "StateOfApplicabilityControlsTabUnlinkMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "6bf3ac32bd032b215e3e4f48100353d7",
+    "id": null,
+    "metadata": {},
+    "name": "StateOfApplicabilityControlsTabUnlinkMutation",
+    "operationKind": "mutation",
+    "text": "mutation StateOfApplicabilityControlsTabUnlinkMutation(\n  $input: DeleteStateOfApplicabilityControlMappingInput!\n) {\n  deleteStateOfApplicabilityControlMapping(input: $input) {\n    deletedStateOfApplicabilityId\n    deletedControlId\n    deletedStateOfApplicabilityControlId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "b8c3e0ca44bde75468fcfab09151854d";
+
+export default node;

apps/console/src/routes.tsx

@@ -35,6 +35,7 @@ import { snapshotsRoutes } from "./routes/snapshotsRoutes.ts";
 import { continualImprovementRoutes } from "./routes/continualImprovementRoutes.ts";
 import { rightsRequestRoutes } from "./routes/rightsRequestRoutes.ts";
 import { processingActivityRoutes } from "./routes/processingActivityRoutes.ts";
+import { statesOfApplicabilityRoutes } from "./routes/statesOfApplicabilityRoutes.ts";
 import { lazy } from "@probo/react-lazy";
 import { loaderFromQueryLoader, routeFromAppRoute, withQueryRef, type AppRoute } from "@probo/routes";
 import { employeeDocumentsQuery } from "./pages/organizations/employee/EmployeeDocumentsPage";
@@ -227,8 +228,9 @@ const routes = [
       ...continualImprovementRoutes,
       ...rightsRequestRoutes,
       ...processingActivityRoutes,
-      ...snapshotsRoutes,
+      ...statesOfApplicabilityRoutes,
       ...trustCenterRoutes,
+      ...snapshotsRoutes,
       {
         path: "*",
         Component: PageError,

apps/console/src/routes/statesOfApplicabilityRoutes.ts

@@ -0,0 +1,70 @@
+import { lazy } from "@probo/react-lazy";
+import { loadQuery } from "react-relay";
+import { relayEnvironment } from "/providers/RelayProviders";
+import { PageSkeleton } from "/components/skeletons/PageSkeleton.tsx";
+import {
+  paginatedStateOfApplicabilityQuery,
+  stateOfApplicabilityNodeQuery,
+} from "/hooks/graph/StateOfApplicabilityGraph";
+import type { StateOfApplicabilityGraphPaginatedQuery } from "/hooks/graph/__generated__/StateOfApplicabilityGraphPaginatedQuery.graphql";
+import type { StateOfApplicabilityGraphNodeQuery } from "/hooks/graph/__generated__/StateOfApplicabilityGraphNodeQuery.graphql";
+import { loaderFromQueryLoader, withQueryRef, type AppRoute } from "@probo/routes";
+
+export const statesOfApplicabilityRoutes = [
+  {
+    path: "states-of-applicability",
+    Fallback: PageSkeleton,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<StateOfApplicabilityGraphPaginatedQuery>(
+        relayEnvironment,
+        paginatedStateOfApplicabilityQuery,
+        { organizationId: organizationId! },
+      ),
+    ),
+    Component: withQueryRef(
+      lazy(() => import("/pages/organizations/states-of-applicability/StatesOfApplicabilityPage")),
+    ),
+  },
+  {
+    path: "snapshots/:snapshotId/states-of-applicability",
+    Fallback: PageSkeleton,
+    loader: loaderFromQueryLoader(({ organizationId }) =>
+      loadQuery<StateOfApplicabilityGraphPaginatedQuery>(
+        relayEnvironment,
+        paginatedStateOfApplicabilityQuery,
+        { organizationId: organizationId! },
+      ),
+    ),
+    Component: withQueryRef(
+      lazy(() => import("/pages/organizations/states-of-applicability/StatesOfApplicabilityPage")),
+    ),
+  },
+  {
+    path: "states-of-applicability/:stateOfApplicabilityId",
+    Fallback: PageSkeleton,
+    loader: loaderFromQueryLoader(({ stateOfApplicabilityId }) =>
+      loadQuery<StateOfApplicabilityGraphNodeQuery>(
+        relayEnvironment,
+        stateOfApplicabilityNodeQuery,
+        { stateOfApplicabilityId: stateOfApplicabilityId! },
+      ),
+    ),
+    Component: withQueryRef(
+      lazy(() => import("/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage")),
+    ),
+  },
+  {
+    path: "snapshots/:snapshotId/states-of-applicability/:stateOfApplicabilityId",
+    Fallback: PageSkeleton,
+    loader: loaderFromQueryLoader(({ stateOfApplicabilityId }) =>
+      loadQuery<StateOfApplicabilityGraphNodeQuery>(
+        relayEnvironment,
+        stateOfApplicabilityNodeQuery,
+        { stateOfApplicabilityId: stateOfApplicabilityId! },
+      ),
+    ),
+    Component: withQueryRef(
+      lazy(() => import("/pages/organizations/states-of-applicability/StateOfApplicabilityDetailPage")),
+    ),
+  },
+] satisfies AppRoute[];