Add controls crud

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

apps/console/src/pages/organizations/OrganizationBreadcrumb.tsx

@@ -375,7 +375,23 @@ function BreadcrumbMeasureView() {
   );
 }
 
-function BreadcrumbControl() {
+function BreadcrumbControlNew() {
+  const { organizationId, frameworkId } = useParams();
+  return (
+    <>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbNavLink
+          to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/new`}
+        >
+          New Control
+        </BreadcrumbNavLink>
+      </BreadcrumbItem>
+    </>
+  );
+}
+
+function BreadcrumbControlExisting() {
   const { organizationId, frameworkId, controlId } = useParams();
   const data = useLazyLoadQuery<OrganizationBreadcrumbBreadcrumbControlQuery>(
     graphql`
@@ -383,7 +399,7 @@ function BreadcrumbControl() {
         control: node(id: $controlId) {
           id
           ... on Control {
-            referenceId
+            sectionTitle
           }
         }
       }
@@ -399,13 +415,27 @@ function BreadcrumbControl() {
         <BreadcrumbNavLink
           to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}`}
         >
-          {data.control?.referenceId}
+          {data.control?.sectionTitle}
         </BreadcrumbNavLink>
       </BreadcrumbItem>
     </>
   );
 }
 
+function BreadcrumbControl() {
+  const { controlId } = useParams();
+
+  if (controlId === "new") {
+    return <BreadcrumbControlNew />;
+  }
+
+  return (
+    <Suspense>
+      <BreadcrumbControlExisting />
+    </Suspense>
+  );
+}
+
 function BreadcrumbRiskList() {
   const { organizationId } = useParams();
   return (

apps/console/src/pages/organizations/Routes.tsx

@@ -11,6 +11,8 @@ import { FrameworkListPage } from "./frameworks/FrameworkListPage";
 import { FrameworkPage } from "./frameworks/FrameworkPage";
 import { NewFrameworkPage } from "./frameworks/NewFrameworkPage";
 import { ControlPage } from "./frameworks/controls/ControlPage";
+import { EditControlPage } from "./frameworks/controls/EditControlPage";
+import { NewControlPage } from "./frameworks/controls/NewControlPage";
 import { EditMeasurePage } from "./measures/EditMeasurePage";
 import { MeasureListPage } from "./measures/MeasureListPage";
 import { MeasurePage } from "./measures/MeasurePage";
@@ -50,7 +52,9 @@ export function OrganizationsRoutes() {
         <Route path="frameworks/:frameworkId/*">
           <Route element={<FrameworkLayout />}>
             <Route index element={<FrameworkPage />} />
+            <Route path="controls/new" element={<NewControlPage />} />
             <Route path="controls/:controlId" element={<ControlPage />} />
+            <Route path="controls/:controlId/edit" element={<EditControlPage />} />
           </Route>
           <Route path="edit" element={<EditFrameworkPage />} />
           <Route path="*" element={<NotFoundPage />} />

apps/console/src/pages/organizations/__generated__/OrganizationBreadcrumbBreadcrumbControlQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f8a8d22a1da9cce219c0c3be9293fe47>>
+ * @generated SignedSource<<07652bb5a37a4cdf28c0df2f627ada0e>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -15,7 +15,7 @@ export type OrganizationBreadcrumbBreadcrumbControlQuery$variables = {
 export type OrganizationBreadcrumbBreadcrumbControlQuery$data = {
   readonly control: {
     readonly id: string;
-    readonly referenceId?: string;
+    readonly sectionTitle?: string;
   };
 };
 export type OrganizationBreadcrumbBreadcrumbControlQuery = {
@@ -52,7 +52,7 @@ v3 = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "referenceId",
+      "name": "sectionTitle",
       "storageKey": null
     }
   ],
@@ -112,16 +112,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "d46d6f288bc94595c84a4c028ba15f83",
+    "cacheID": "6d3e964652b3f13d0524f2db09668d7d",
     "id": null,
     "metadata": {},
     "name": "OrganizationBreadcrumbBreadcrumbControlQuery",
     "operationKind": "query",
-    "text": "query OrganizationBreadcrumbBreadcrumbControlQuery(\n  $controlId: ID!\n) {\n  control: node(id: $controlId) {\n    __typename\n    id\n    ... on Control {\n      referenceId\n    }\n  }\n}\n"
+    "text": "query OrganizationBreadcrumbBreadcrumbControlQuery(\n  $controlId: ID!\n) {\n  control: node(id: $controlId) {\n    __typename\n    id\n    ... on Control {\n      sectionTitle\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "dd4a9837ee450c35961ee67d3213c017";
+(node as any).hash = "04f863d003032971d0490bf0d0c90fce";
 
 export default node;

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

@@ -24,6 +24,7 @@ import { PageTemplate } from "@/components/PageTemplate";
 import { FrameworkLayoutViewSkeleton } from "./FrameworkLayout";
 import { ControlList } from "./FrameworkLayoutView/ControlList";
 import { FrameworkLayoutViewExportAuditMutation } from "./__generated__/FrameworkLayoutViewExportAuditMutation.graphql";
+import { Plus } from "lucide-react";
 
 const FrameworkLayoutViewQuery = graphql`
   query FrameworkLayoutViewQuery($frameworkId: ID!) {
@@ -35,12 +36,12 @@ const FrameworkLayoutViewQuery = graphql`
         ...ControlList_List
         firstControl: controls(
           first: 1
-          orderBy: { field: CREATED_AT, direction: ASC }
+          orderBy: { field: SECTION_TITLE, direction: ASC }
         ) @connection(key: "FrameworkLayoutView_firstControl") {
           edges {
             node {
               id
-              referenceId
+              sectionTitle
               name
             }
           }
@@ -153,6 +154,14 @@ function FrameworkLayoutViewContent({
       description={framework.description || ""}
       actions={
         <div className="flex gap-4">
+          <Button variant="secondary" asChild>
+            <Link
+              to={`/organizations/${organizationId}/frameworks/${framework.id}/controls/new`}
+            >
+              <Plus className="w-3 h-4 mr-2" />
+              Create Control
+            </Link>
+          </Button>
           <Button variant="secondary" asChild>
             <Link
               to={`/organizations/${organizationId}/frameworks/${framework.id}/edit`}

apps/console/src/pages/organizations/frameworks/FrameworkLayoutView/ControlList.tsx

@@ -7,12 +7,12 @@ const maxControlNameLength = 80;
 
 export const controlListFragment = graphql`
   fragment ControlList_List on Framework {
-    controls(first: 100, orderBy: { field: CREATED_AT, direction: ASC })
+    controls(first: 100, orderBy: { field: SECTION_TITLE, direction: ASC })
       @connection(key: "FrameworkView_controls") {
       edges {
         node {
           id
-          referenceId
+          sectionTitle
           name
         }
       }
@@ -37,10 +37,6 @@ export function ControlList(props: ControlListProps) {
     fragmentKey,
   );
 
-  if (controls.edges.length === 0) {
-    return "No controls available for this framework";
-  }
-
   return (
     <aside
       className={cn(
@@ -48,7 +44,12 @@ export function ControlList(props: ControlListProps) {
         className,
       )}
     >
-      {controls.edges.map(({ node: control }, i) => (
+      {controls.edges.length === 0 ? (
+        <div className="p-8 text-center text-tertiary">
+          No controls available for this framework. Create one to get started.
+        </div>
+      ) : (
+        controls.edges.map(({ node: control }, i) => (
           <NavLink
             key={control.id}
             to={`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${control.id}`}
@@ -68,7 +69,7 @@ export function ControlList(props: ControlListProps) {
                       isActive && "font-bold bg-active-bg border-mid-b",
                     )}
                   >
-                  {control.referenceId}
+                    {control.sectionTitle}
                   </div>
                   <div
                     className={cn(
@@ -84,7 +85,8 @@ export function ControlList(props: ControlListProps) {
               );
             }}
           </NavLink>
-      ))}
+        ))
+      )}
     </aside>
   );
 }

apps/console/src/pages/organizations/frameworks/FrameworkLayoutView/__generated__/ControlList_List.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<a3e361b3b8152318476292098dd890f4>>
+ * @generated SignedSource<<35014a0564ea29edf018bcd38b2f3edf>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -16,7 +16,7 @@ export type ControlList_List$data = {
       readonly node: {
         readonly id: string;
         readonly name: string;
-        readonly referenceId: string;
+        readonly sectionTitle: string;
       };
     }>;
   };
@@ -52,7 +52,7 @@ const node: ReaderFragment = {
           "name": "orderBy",
           "value": {
             "direction": "ASC",
-            "field": "CREATED_AT"
+            "field": "SECTION_TITLE"
           }
         }
       ],
@@ -88,7 +88,7 @@ const node: ReaderFragment = {
                   "alias": null,
                   "args": null,
                   "kind": "ScalarField",
-                  "name": "referenceId",
+                  "name": "sectionTitle",
                   "storageKey": null
                 },
                 {
@@ -144,13 +144,13 @@ const node: ReaderFragment = {
           "storageKey": null
         }
       ],
-      "storageKey": "__FrameworkView_controls_connection(orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+      "storageKey": "__FrameworkView_controls_connection(orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
     }
   ],
   "type": "Framework",
   "abstractKey": null
 };
 
-(node as any).hash = "aa95219172d60909d7a503d246e0f4f5";
+(node as any).hash = "14a919a4a894eeec4bed03c918f9e4d8";
 
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<4f0c7f7d3fb0272b838162d615ba905b>>
+ * @generated SignedSource<<483ff3a5c2b7785a8b8b8d308065a7de>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -21,7 +21,7 @@ export type FrameworkLayoutViewQuery$data = {
         readonly node: {
           readonly id: string;
           readonly name: string;
-          readonly referenceId: string;
+          readonly sectionTitle: string;
         };
       }>;
     };
@@ -76,7 +76,7 @@ v5 = {
   "name": "orderBy",
   "value": {
     "direction": "ASC",
-    "field": "CREATED_AT"
+    "field": "SECTION_TITLE"
   }
 },
 v6 = {
@@ -108,7 +108,7 @@ v7 = [
             "alias": null,
             "args": null,
             "kind": "ScalarField",
-            "name": "referenceId",
+            "name": "sectionTitle",
             "storageKey": null
           },
           (v3/*: any*/),
@@ -207,7 +207,7 @@ return {
                 "name": "__FrameworkLayoutView_firstControl_connection",
                 "plural": false,
                 "selections": (v7/*: any*/),
-                "storageKey": "__FrameworkLayoutView_firstControl_connection(orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+                "storageKey": "__FrameworkLayoutView_firstControl_connection(orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
               }
             ],
             "type": "Framework",
@@ -249,7 +249,7 @@ return {
                 "name": "controls",
                 "plural": false,
                 "selections": (v7/*: any*/),
-                "storageKey": "controls(first:100,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+                "storageKey": "controls(first:100,orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
               },
               {
                 "alias": null,
@@ -268,7 +268,7 @@ return {
                 "name": "controls",
                 "plural": false,
                 "selections": (v7/*: any*/),
-                "storageKey": "controls(first:1,orderBy:{\"direction\":\"ASC\",\"field\":\"CREATED_AT\"})"
+                "storageKey": "controls(first:1,orderBy:{\"direction\":\"ASC\",\"field\":\"SECTION_TITLE\"})"
               },
               {
                 "alias": "firstControl",
@@ -289,7 +289,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "98ca0e0c503bb7c5e3e538e8831eeefa",
+    "cacheID": "2fd37cafbd7284ade592b0cb2e7046ee",
     "id": null,
     "metadata": {
       "connection": [
@@ -306,11 +306,11 @@ return {
     },
     "name": "FrameworkLayoutViewQuery",
     "operationKind": "query",
-    "text": "query FrameworkLayoutViewQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    id\n    ... on Framework {\n      name\n      description\n      ...ControlList_List\n      firstControl: controls(first: 1, orderBy: {field: CREATED_AT, direction: ASC}) {\n        edges {\n          node {\n            id\n            referenceId\n            name\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n\nfragment ControlList_List on Framework {\n  controls(first: 100, orderBy: {field: CREATED_AT, direction: ASC}) {\n    edges {\n      node {\n        id\n        referenceId\n        name\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n"
+    "text": "query FrameworkLayoutViewQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    id\n    ... on Framework {\n      name\n      description\n      ...ControlList_List\n      firstControl: controls(first: 1, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n        edges {\n          node {\n            id\n            sectionTitle\n            name\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n\nfragment ControlList_List on Framework {\n  controls(first: 100, orderBy: {field: SECTION_TITLE, direction: ASC}) {\n    edges {\n      node {\n        id\n        sectionTitle\n        name\n        __typename\n      }\n      cursor\n    }\n    pageInfo {\n      endCursor\n      hasNextPage\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "1935177e374d21015e102745c4d51e94";
+(node as any).hash = "45b60ab441af6a1c4543532be7f40d84";
 
 export default node;

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

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2f29bc26fdb324cad6eb8d7bdd48447f>>
+ * @generated SignedSource<<878dff73b0684026603de1884d9f5ed9>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -250,7 +250,7 @@ return {
                             "alias": null,
                             "args": null,
                             "kind": "ScalarField",
-                            "name": "referenceId",
+                            "name": "sectionTitle",
                             "storageKey": null
                           },
                           (v6/*: any*/)
@@ -286,7 +286,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "c7d856630ed8706055e1ff572d0e7293",
+    "cacheID": "58ce0c4b37adb468f356e1296948150e",
     "id": null,
     "metadata": {
       "connection": [
@@ -303,7 +303,7 @@ return {
     },
     "name": "FrameworkViewQuery",
     "operationKind": "query",
-    "text": "query FrameworkViewQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    id\n    ... on Framework {\n      name\n      description\n      firstControl: controls(first: 1, orderBy: {field: CREATED_AT, direction: ASC}) {\n        edges {\n          node {\n            ...ControlFragment_Control\n            id\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n\nfragment ControlFragment_Control on Control {\n  id\n  description\n  name\n  referenceId\n}\n"
+    "text": "query FrameworkViewQuery(\n  $frameworkId: ID!\n) {\n  node(id: $frameworkId) {\n    __typename\n    id\n    ... on Framework {\n      name\n      description\n      firstControl: controls(first: 1, orderBy: {field: CREATED_AT, direction: ASC}) {\n        edges {\n          node {\n            ...ControlFragment_Control\n            id\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n\nfragment ControlFragment_Control on Control {\n  id\n  description\n  name\n  sectionTitle\n}\n"
   }
 };
 })();

apps/console/src/pages/organizations/frameworks/controls/Control.tsx

@@ -1,13 +1,14 @@
 import { Button } from "@/components/ui/button";
-import { DialogHeader, DialogFooter } from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { useToast } from "@/hooks/use-toast";
 import {
   Dialog,
   DialogContent,
+  DialogHeader,
+  DialogFooter,
   DialogTitle,
   DialogDescription,
-} from "@radix-ui/react-dialog";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/hooks/use-toast";
 import {
   Select,
   SelectTrigger,
@@ -24,7 +25,7 @@ import {
   useMutation,
   useRelayEnvironment,
 } from "react-relay";
-import { useParams, Link } from "react-router";
+import { useParams, Link, useNavigate } from "react-router";
 import {
   ControlLinkedMeasuresQuery$data,
   ControlLinkedMeasuresQuery,
@@ -48,7 +49,7 @@ const controlFragment = graphql`
     id
     description
     name
-    referenceId
+    sectionTitle
   }
 `;
 
@@ -202,18 +203,27 @@ const deleteDocumentMappingMutation = graphql`
   }
 `;
 
+const deleteControlMutation = graphql`
+  mutation ControlDeleteMutation($input: DeleteControlInput!, $connections: [ID!]!) {
+    deleteControl(input: $input) {
+      deletedControlId @deleteEdge(connections: $connections)
+    }
+  }
+`;
+
 export function Control({
   controlKey,
 }: {
   controlKey: ControlFragment_Control$key;
 }) {
-  const { organizationId /* frameworkId */ } = useParams<{
+  const { organizationId, frameworkId } = useParams<{
     organizationId: string;
     frameworkId: string;
   }>();
   const control = useFragment(controlFragment, controlKey);
   const { toast } = useToast();
   const environment = useRelayEnvironment();
+  const navigate = useNavigate();
 
   // State for measure mapping
   const [isMeasureMappingDialogOpen, setIsMeasureMappingDialogOpen] =
@@ -249,6 +259,11 @@ export function Control({
   );
   const [commitCreateDocumentMapping] = useMutation(createDocumentMappingMutation);
   const [commitDeleteDocumentMapping] = useMutation(deleteDocumentMappingMutation);
+  const [commitDeleteControl] = useMutation(deleteControlMutation);
+
+  // State for delete dialog
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
 
   // Load initial linked measures data
   useEffect(() => {
@@ -780,9 +795,10 @@ export function Control({
   };
 
   return (
+    <>
       <div className="w-auto p-5 flex items-start gap-5">
         <div className="font-mono text-lg px-1 py-0.25 rounded-sm bg-active-bg border-mid-b border font-bold">
-        {control.referenceId}
+          {control.sectionTitle}
         </div>
         <div className="flex-1">
           <h2 className="text-2xl font-medium">{control.name}</h2>
@@ -1270,7 +1286,100 @@ export function Control({
               )}
             </div>
           </div>
+
+          {/* Delete Control Section */}
+          <div className="mt-12 border-t pt-8">
+            <div className="flex justify-end items-center gap-2">
+              <Button
+                variant="outline"
+                onClick={() => navigate(`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${control.id}/edit`)}
+              >
+                Edit Control
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={() => setIsDeleteDialogOpen(true)}
+              >
+                Delete Control
+              </Button>
             </div>
           </div>
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Control</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete the control &quot;{control.name}&quot;? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setIsDeleteDialogOpen(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                setIsDeleting(true);
+                commitDeleteControl({
+                  variables: {
+                    input: {
+                      controlId: control.id,
+                    },
+                    connections: [
+                      `client:${frameworkId}:__Framework_controls_connection`,
+                      `client:${frameworkId}:FrameworkLayoutView_firstControl`
+                    ],
+                  },
+                  onCompleted: (_, errors) => {
+                    setIsDeleting(false);
+                    setIsDeleteDialogOpen(false);
+
+                    if (errors) {
+                      console.error("Error deleting control:", errors);
+                      toast({
+                        title: "Error",
+                        description: "Failed to delete control. Please try again.",
+                        variant: "destructive",
+                      });
+                      return;
+                    }
+
+                    toast({
+                      title: "Success",
+                      description: "Control successfully deleted.",
+                    });
+
+                    // Navigate and force reload
+                    navigate(`/organizations/${organizationId}/frameworks/${frameworkId}`, { replace: true });
+                    window.location.reload();
+                  },
+                  onError: (error) => {
+                    setIsDeleting(false);
+                    setIsDeleteDialogOpen(false);
+                    console.error("Error deleting control:", error);
+                    toast({
+                      title: "Error",
+                      description: "Failed to delete control. Please try again.",
+                      variant: "destructive",
+                    });
+                  },
+                });
+              }}
+              disabled={isDeleting}
+            >
+              {isDeleting ? "Deleting..." : "Delete"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

apps/console/src/pages/organizations/frameworks/controls/ControlPage.tsx

@@ -1,38 +1,20 @@
-import { Card, CardContent } from "@/components/ui/card";
+import { Loader2 } from "lucide-react";
-import { Suspense } from "react";
+import { lazy, Suspense } from "react";
-import { useLocation } from "react-router";
-import { lazy } from "@probo/react-lazy";
-import ErrorBoundary from "@/components/ErrorBoundary";
 
 const ControlView = lazy(() => import("./ControlView"));
 
 export function ControlViewSkeleton() {
   return (
-    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    <div className="flex items-center justify-center h-full">
-      {[1, 2, 3].map((i) => (
+      <Loader2 className="w-8 h-8 animate-spin text-info" />
-        <Card key={i}>
-          <CardContent className="p-6">
-            <div className="relative mb-6">
-              <div className="bg-subtle-bg w-24 h-24 rounded-full animate-pulse mb-4" />
-              <div className="h-6 w-48 bg-subtle-bg animate-pulse rounded mb-2" />
-              <div className="h-20 w-full bg-subtle-bg animate-pulse rounded" />
-            </div>
-            <div className="h-4 w-32 bg-subtle-bg animate-pulse rounded" />
-          </CardContent>
-        </Card>
-      ))}
     </div>
   );
 }
 
 export function ControlPage() {
-  const location = useLocation();
-
   return (
-    <Suspense key={location.pathname} fallback={<ControlViewSkeleton />}>
+    <Suspense fallback={<ControlViewSkeleton />}>
-      <ErrorBoundary key={location.pathname}>
       <ControlView />
-      </ErrorBoundary>
     </Suspense>
   );
 }

apps/console/src/pages/organizations/frameworks/controls/EditControlPage.tsx

@@ -0,0 +1,14 @@
+import { Loader2 } from "lucide-react";
+import EditControlView from "./EditControlView";
+
+export function EditControlViewSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="w-8 h-8 animate-spin text-info" />
+    </div>
+  );
+}
+
+export function EditControlPage() {
+  return <EditControlView />;
+}

apps/console/src/pages/organizations/frameworks/controls/EditControlView.tsx

@@ -0,0 +1,201 @@
+import { Suspense, useEffect, useState } from "react";
+import {
+  graphql,
+  PreloadedQuery,
+  useMutation,
+  usePreloadedQuery,
+  useQueryLoader,
+} from "react-relay";
+import { useParams, useNavigate } from "react-router";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2 } from "lucide-react";
+import { EditControlViewSkeleton } from "./EditControlPage";
+import { EditControlViewQuery } from "./__generated__/EditControlViewQuery.graphql";
+
+const editControlViewQuery = graphql`
+  query EditControlViewQuery($controlId: ID!) {
+    control: node(id: $controlId) {
+      ... on Control {
+        id
+        name
+        description
+        sectionTitle
+      }
+    }
+  }
+`;
+
+const updateControlMutation = graphql`
+  mutation EditControlViewUpdateControlMutation($input: UpdateControlInput!) {
+    updateControl(input: $input) {
+      control {
+        id
+        name
+        description
+        sectionTitle
+      }
+    }
+  }
+`;
+
+function EditControlViewContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<EditControlViewQuery>;
+}) {
+  const { organizationId, frameworkId } = useParams<{
+    organizationId: string;
+    frameworkId: string;
+  }>();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const data = usePreloadedQuery(editControlViewQuery, queryRef);
+  const [isLoading, setIsLoading] = useState(false);
+  const [commitUpdateControl] = useMutation(updateControlMutation);
+
+  if (!data.control) {
+    return <EditControlViewSkeleton />;
+  }
+
+  const [formData, setFormData] = useState({
+    name: data.control.name || "",
+    description: data.control.description || "",
+    sectionTitle: data.control.sectionTitle || "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    commitUpdateControl({
+      variables: {
+        input: {
+          id: data.control.id,
+          name: formData.name,
+          description: formData.description,
+          sectionTitle: formData.sectionTitle,
+        },
+      },
+      onCompleted: (_, errors) => {
+        setIsLoading(false);
+
+        if (errors) {
+          console.error("Error updating control:", errors);
+          toast({
+            title: "Error",
+            description: "Failed to update control. Please try again.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        toast({
+          title: "Success",
+          description: "Control updated successfully.",
+        });
+
+        navigate(`/organizations/${organizationId}/frameworks/${frameworkId}/controls/${data.control.id}`);
+      },
+      onError: (error) => {
+        setIsLoading(false);
+        console.error("Error updating control:", error);
+        toast({
+          title: "Error",
+          description: "Failed to update control. Please try again.",
+          variant: "destructive",
+        });
+      },
+    });
+  };
+
+  return (
+    <div className="container py-10">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">Edit Control</h1>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium mb-2">Section Title</label>
+            <Input
+              value={formData.sectionTitle}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, sectionTitle: e.target.value }))
+              }
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Name</label>
+            <Input
+              value={formData.name}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, name: e.target.value }))
+              }
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Description</label>
+            <Textarea
+              value={formData.description}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, description: e.target.value }))
+              }
+              required
+              rows={5}
+            />
+          </div>
+
+          <div className="flex justify-end gap-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(
+                  `/organizations/${organizationId}/frameworks/${frameworkId}/controls/${data.control.id}`
+                )
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                  Saving...
+                </>
+              ) : (
+                "Save Changes"
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function EditControlView({ controlId }: { controlId?: string }) {
+  const { controlId: controlIdParam } = useParams();
+  const [queryRef, loadQuery] =
+    useQueryLoader<EditControlViewQuery>(editControlViewQuery);
+
+  useEffect(() => {
+    loadQuery({ controlId: (controlId ?? controlIdParam)! });
+  }, [loadQuery, controlId, controlIdParam]);
+
+  if (!queryRef) {
+    return <EditControlViewSkeleton />;
+  }
+
+  return (
+    <Suspense fallback={<EditControlViewSkeleton />}>
+      <EditControlViewContent queryRef={queryRef} />
+    </Suspense>
+  );
+}

apps/console/src/pages/organizations/frameworks/controls/NewControlPage.tsx

@@ -0,0 +1,14 @@
+import { Loader2 } from "lucide-react";
+import NewControlView from "./NewControlView";
+
+export function NewControlViewSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <Loader2 className="w-8 h-8 animate-spin text-info" />
+    </div>
+  );
+}
+
+export function NewControlPage() {
+  return <NewControlView />;
+}

apps/console/src/pages/organizations/frameworks/controls/NewControlView.tsx

@@ -0,0 +1,202 @@
+import { useState } from "react";
+import { graphql, useMutation } from "react-relay";
+import { generateUniqueClientID } from "relay-runtime";
+import { useNavigate, useParams } from "react-router";
+import { useToast } from "@/hooks/use-toast";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2, AlertCircle } from "lucide-react";
+import { NewControlViewCreateControlMutation } from "./__generated__/NewControlViewCreateControlMutation.graphql";
+
+const createControlMutation = graphql`
+  mutation NewControlViewCreateControlMutation($input: CreateControlInput!) {
+    createControl(input: $input) {
+      controlEdge {
+        node {
+          id
+          name
+          description
+          sectionTitle
+        }
+      }
+    }
+  }
+`;
+
+export default function NewControlView() {
+  const { organizationId, frameworkId } = useParams<{
+    organizationId: string;
+    frameworkId: string;
+  }>();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [commitCreateControl] = useMutation<NewControlViewCreateControlMutation>(
+    createControlMutation
+  );
+
+  // Validate required URL parameters
+  if (!organizationId || !frameworkId) {
+    return (
+      <div className="container py-10">
+        <div className="max-w-2xl mx-auto">
+          <div className="flex items-center gap-2 p-4 border border-red-200 bg-red-50 rounded-md text-red-700">
+            <AlertCircle className="w-5 h-5" />
+            <p>Missing required URL parameters. Please check the URL and try again.</p>
+          </div>
+          <div className="mt-4">
+            <Button
+              variant="outline"
+              onClick={() => navigate('/organizations')}
+            >
+              Return to Organizations
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    sectionTitle: "",
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    commitCreateControl({
+      variables: {
+        input: {
+          frameworkId,
+          name: formData.name,
+          description: formData.description,
+          sectionTitle: formData.sectionTitle,
+        },
+      },
+      onCompleted: (response, errors) => {
+        setIsLoading(false);
+
+        if (errors) {
+          console.error("Error creating control:", errors);
+          toast({
+            title: "Error",
+            description: "Failed to create control. Please try again.",
+            variant: "destructive",
+          });
+          return;
+        }
+
+        const controlId = response.createControl.controlEdge.node.id;
+        toast({
+          title: "Success",
+          description: "Control created successfully.",
+        });
+
+        navigate(
+          `/organizations/${organizationId}/frameworks/${frameworkId}/controls/${controlId}?t=${Date.now()}`,
+          { replace: true }
+        );
+      },
+      onError: (error) => {
+        setIsLoading(false);
+        console.error("Error creating control:", error);
+        toast({
+          title: "Error",
+          description: "Failed to create control. Please try again.",
+          variant: "destructive",
+        });
+      },
+      updater: (store) => {
+        const payload = store.getRootField('createControl');
+        const newControl = payload.getLinkedRecord('controlEdge').getLinkedRecord('node');
+
+        const framework = store.get(frameworkId);
+        if (framework) {
+          const controls = framework.getLinkedRecord('controls');
+          if (controls) {
+            const edges = controls.getLinkedRecords('edges') || [];
+            const newEdgeId = generateUniqueClientID();
+            const newEdge = store.create(newEdgeId, 'ControlEdge');
+            newEdge.setLinkedRecord(newControl, 'node');
+            controls.setLinkedRecords([newEdge, ...edges], 'edges');
+          }
+        }
+      }
+    });
+  };
+
+  return (
+    <div className="container py-10">
+      <div className="max-w-2xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">Create Control</h1>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label className="block text-sm font-medium mb-2">Section Title</label>
+            <Input
+              value={formData.sectionTitle}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, sectionTitle: e.target.value }))
+              }
+              required
+              placeholder="e.g. CTRL-001"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Name</label>
+            <Input
+              value={formData.name}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, name: e.target.value }))
+              }
+              required
+              placeholder="Enter control name"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2">Description</label>
+            <Textarea
+              value={formData.description}
+              onChange={(e) =>
+                setFormData((prev) => ({ ...prev, description: e.target.value }))
+              }
+              required
+              rows={5}
+              placeholder="Describe the control"
+            />
+          </div>
+
+          <div className="flex justify-end gap-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                navigate(
+                  `/organizations/${organizationId}/frameworks/${frameworkId}`
+                )
+              }
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isLoading}>
+              {isLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                  Creating...
+                </>
+              ) : (
+                "Create Control"
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

apps/console/src/pages/organizations/frameworks/controls/__generated__/ControlDeleteMutation.graphql.ts

@@ -0,0 +1,132 @@
+/**
+ * @generated SignedSource<<210832f4f838924747194254c58b57a4>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteControlInput = {
+  controlId: string;
+};
+export type ControlDeleteMutation$variables = {
+  connections: ReadonlyArray<string>;
+  input: DeleteControlInput;
+};
+export type ControlDeleteMutation$data = {
+  readonly deleteControl: {
+    readonly deletedControlId: string;
+  };
+};
+export type ControlDeleteMutation = {
+  response: ControlDeleteMutation$data;
+  variables: ControlDeleteMutation$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": "deletedControlId",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [
+      (v0/*: any*/),
+      (v1/*: any*/)
+    ],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "ControlDeleteMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteControlPayload",
+        "kind": "LinkedField",
+        "name": "deleteControl",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/)
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [
+      (v1/*: any*/),
+      (v0/*: any*/)
+    ],
+    "kind": "Operation",
+    "name": "ControlDeleteMutation",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v2/*: any*/),
+        "concreteType": "DeleteControlPayload",
+        "kind": "LinkedField",
+        "name": "deleteControl",
+        "plural": false,
+        "selections": [
+          (v3/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "filters": null,
+            "handle": "deleteEdge",
+            "key": "",
+            "kind": "ScalarHandle",
+            "name": "deletedControlId",
+            "handleArgs": [
+              {
+                "kind": "Variable",
+                "name": "connections",
+                "variableName": "connections"
+              }
+            ]
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "2d95c1ff9328afa01b0f24d1910898d1",
+    "id": null,
+    "metadata": {},
+    "name": "ControlDeleteMutation",
+    "operationKind": "mutation",
+    "text": "mutation ControlDeleteMutation(\n  $input: DeleteControlInput!\n) {\n  deleteControl(input: $input) {\n    deletedControlId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "a1e347241b41977cdea4a31d371e8770";
+
+export default node;

apps/console/src/pages/organizations/frameworks/controls/__generated__/ControlFragment_Control.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<8c59833cd4588accdf1d316d9e494d26>>
+ * @generated SignedSource<<50304bfb34b0581895a71491f521c273>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -14,7 +14,7 @@ export type ControlFragment_Control$data = {
   readonly description: string;
   readonly id: string;
   readonly name: string;
-  readonly referenceId: string;
+  readonly sectionTitle: string;
   readonly " $fragmentType": "ControlFragment_Control";
 };
 export type ControlFragment_Control$key = {
@@ -53,7 +53,7 @@ const node: ReaderFragment = {
       "alias": null,
       "args": null,
       "kind": "ScalarField",
-      "name": "referenceId",
+      "name": "sectionTitle",
       "storageKey": null
     }
   ],
@@ -61,6 +61,6 @@ const node: ReaderFragment = {
   "abstractKey": null
 };
 
-(node as any).hash = "ccbc9d6743d45b9a4049b661a1f0ad57";
+(node as any).hash = "b04ce9de2a583d415011d88563120b09";
 
 export default node;

apps/console/src/pages/organizations/frameworks/controls/__generated__/ControlViewQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<2b4d05f2a954b567c9278d604e32db9e>>
+ * @generated SignedSource<<53940cf77492a6c53c699caeb14b1b54>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -117,7 +117,7 @@ return {
                 "alias": null,
                 "args": null,
                 "kind": "ScalarField",
-                "name": "referenceId",
+                "name": "sectionTitle",
                 "storageKey": null
               }
             ],
@@ -130,12 +130,12 @@ return {
     ]
   },
   "params": {
-    "cacheID": "a65968fe47c5fb75f72a01d9785ae176",
+    "cacheID": "5afaae7974871ebac2058831d084514e",
     "id": null,
     "metadata": {},
     "name": "ControlViewQuery",
     "operationKind": "query",
-    "text": "query ControlViewQuery(\n  $controlId: ID!\n) {\n  node(id: $controlId) {\n    __typename\n    id\n    ...ControlFragment_Control\n  }\n}\n\nfragment ControlFragment_Control on Control {\n  id\n  description\n  name\n  referenceId\n}\n"
+    "text": "query ControlViewQuery(\n  $controlId: ID!\n) {\n  node(id: $controlId) {\n    __typename\n    id\n    ...ControlFragment_Control\n  }\n}\n\nfragment ControlFragment_Control on Control {\n  id\n  description\n  name\n  sectionTitle\n}\n"
   }
 };
 })();

apps/console/src/pages/organizations/frameworks/controls/__generated__/EditControlPageUpdateControlMutation.graphql.ts

@@ -0,0 +1,132 @@
+/**
+ * @generated SignedSource<<2e60fc1d41d307f288d47b07d4651997>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateControlInput = {
+  description?: string | null | undefined;
+  id: string;
+  name?: string | null | undefined;
+  referenceId?: string | null | undefined;
+};
+export type EditControlPageUpdateControlMutation$variables = {
+  input: UpdateControlInput;
+};
+export type EditControlPageUpdateControlMutation$data = {
+  readonly updateControl: {
+    readonly control: {
+      readonly description: string;
+      readonly id: string;
+      readonly name: string;
+      readonly referenceId: string;
+    };
+  };
+};
+export type EditControlPageUpdateControlMutation = {
+  response: EditControlPageUpdateControlMutation$data;
+  variables: EditControlPageUpdateControlMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateControlPayload",
+    "kind": "LinkedField",
+    "name": "updateControl",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Control",
+        "kind": "LinkedField",
+        "name": "control",
+        "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": "description",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "referenceId",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditControlPageUpdateControlMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditControlPageUpdateControlMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "62ebcc3fcdb6bf1b1c585227e6555095",
+    "id": null,
+    "metadata": {},
+    "name": "EditControlPageUpdateControlMutation",
+    "operationKind": "mutation",
+    "text": "mutation EditControlPageUpdateControlMutation(\n  $input: UpdateControlInput!\n) {\n  updateControl(input: $input) {\n    control {\n      id\n      name\n      description\n      referenceId\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "2a3daa12db6c6ceac41ffb25be14760f";
+
+export default node;

apps/console/src/pages/organizations/frameworks/controls/__generated__/EditControlViewQuery.graphql.ts

@@ -0,0 +1,154 @@
+/**
+ * @generated SignedSource<<1e68e8f32977bfde6529ccb4244dd679>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type EditControlViewQuery$variables = {
+  controlId: string;
+};
+export type EditControlViewQuery$data = {
+  readonly control: {
+    readonly description?: string;
+    readonly id?: string;
+    readonly name?: string;
+    readonly sectionTitle?: string;
+  };
+};
+export type EditControlViewQuery = {
+  response: EditControlViewQuery$data;
+  variables: EditControlViewQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "controlId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "controlId"
+  }
+],
+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": "description",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "sectionTitle",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditControlViewQuery",
+    "selections": [
+      {
+        "alias": "control",
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/),
+              (v4/*: any*/),
+              (v5/*: any*/)
+            ],
+            "type": "Control",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditControlViewQuery",
+    "selections": [
+      {
+        "alias": "control",
+        "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*/)
+            ],
+            "type": "Control",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "0b532a5fff1f69df57220aa122e32e18",
+    "id": null,
+    "metadata": {},
+    "name": "EditControlViewQuery",
+    "operationKind": "query",
+    "text": "query EditControlViewQuery(\n  $controlId: ID!\n) {\n  control: node(id: $controlId) {\n    __typename\n    ... on Control {\n      id\n      name\n      description\n      sectionTitle\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "83b8034c722cd3fe442906b74a1613d3";
+
+export default node;

apps/console/src/pages/organizations/frameworks/controls/__generated__/EditControlViewUpdateControlMutation.graphql.ts

@@ -0,0 +1,132 @@
+/**
+ * @generated SignedSource<<b8d91f33ada88a0656ae9637ebae06a3>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateControlInput = {
+  description?: string | null | undefined;
+  id: string;
+  name?: string | null | undefined;
+  sectionTitle?: string | null | undefined;
+};
+export type EditControlViewUpdateControlMutation$variables = {
+  input: UpdateControlInput;
+};
+export type EditControlViewUpdateControlMutation$data = {
+  readonly updateControl: {
+    readonly control: {
+      readonly description: string;
+      readonly id: string;
+      readonly name: string;
+      readonly sectionTitle: string;
+    };
+  };
+};
+export type EditControlViewUpdateControlMutation = {
+  response: EditControlViewUpdateControlMutation$data;
+  variables: EditControlViewUpdateControlMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateControlPayload",
+    "kind": "LinkedField",
+    "name": "updateControl",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Control",
+        "kind": "LinkedField",
+        "name": "control",
+        "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": "description",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "sectionTitle",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditControlViewUpdateControlMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditControlViewUpdateControlMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "266ebf922cda80bcc5d0384f37b2d3fa",
+    "id": null,
+    "metadata": {},
+    "name": "EditControlViewUpdateControlMutation",
+    "operationKind": "mutation",
+    "text": "mutation EditControlViewUpdateControlMutation(\n  $input: UpdateControlInput!\n) {\n  updateControl(input: $input) {\n    control {\n      id\n      name\n      description\n      sectionTitle\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "5f232d3fbab52a0bb165bfa58c09bc67";
+
+export default node;

apps/console/src/pages/organizations/frameworks/controls/__generated__/NewControlViewCreateControlMutation.graphql.ts

@@ -0,0 +1,145 @@
+/**
+ * @generated SignedSource<<bbcc1a7901aa7dd7639e83dfb6590fa5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type CreateControlInput = {
+  description: string;
+  frameworkId: string;
+  name: string;
+  sectionTitle: string;
+};
+export type NewControlViewCreateControlMutation$variables = {
+  input: CreateControlInput;
+};
+export type NewControlViewCreateControlMutation$data = {
+  readonly createControl: {
+    readonly controlEdge: {
+      readonly node: {
+        readonly description: string;
+        readonly id: string;
+        readonly name: string;
+        readonly sectionTitle: string;
+      };
+    };
+  };
+};
+export type NewControlViewCreateControlMutation = {
+  response: NewControlViewCreateControlMutation$data;
+  variables: NewControlViewCreateControlMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "CreateControlPayload",
+    "kind": "LinkedField",
+    "name": "createControl",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "ControlEdge",
+        "kind": "LinkedField",
+        "name": "controlEdge",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "Control",
+            "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": "description",
+                "storageKey": null
+              },
+              {
+                "alias": null,
+                "args": null,
+                "kind": "ScalarField",
+                "name": "sectionTitle",
+                "storageKey": null
+              }
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "NewControlViewCreateControlMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "NewControlViewCreateControlMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "2005ccdbeac4998dc5bea71013f4cb5d",
+    "id": null,
+    "metadata": {},
+    "name": "NewControlViewCreateControlMutation",
+    "operationKind": "mutation",
+    "text": "mutation NewControlViewCreateControlMutation(\n  $input: CreateControlInput!\n) {\n  createControl(input: $input) {\n    controlEdge {\n      node {\n        id\n        name\n        description\n        sectionTitle\n      }\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "354415d46fd5d1b15c029b96452054d3";
+
+export default node;

apps/console/src/pages/organizations/measures/MeasureView.tsx

@@ -396,7 +396,7 @@ const frameworksQuery = graphql`
                 edges {
                   node {
                     id
-                    referenceId
+                    sectionTitle
                     name
                     description
                   }
@@ -419,7 +419,7 @@ const linkedControlsQuery = graphql`
           edges {
             node {
               id
-              referenceId
+              sectionTitle
               name
               description
             }
@@ -2087,7 +2087,7 @@ function MeasureViewContent({
     const lowerQuery = controlSearchQuery.toLowerCase();
     return controls.filter(
       (control) =>
-        control.referenceId.toLowerCase().includes(lowerQuery) ||
+        control.sectionTitle.toLowerCase().includes(lowerQuery) ||
         control.name.toLowerCase().includes(lowerQuery) ||
         (control.description &&
           control.description.toLowerCase().includes(lowerQuery))
@@ -2733,7 +2733,7 @@ function MeasureViewContent({
                               <div className="flex items-center gap-2">
                                 <ShieldCheck className="w-4 h-4 text-green-600" />
                                 <span className="font-medium">
-                                  {control.referenceId}
+                                  {control.sectionTitle}
                                 </span>
                               </div>
                             </td>
@@ -3829,7 +3829,7 @@ function MeasureViewContent({
                             <div className="flex items-center gap-2">
                               <ShieldCheck className="w-4 h-4 text-green-600" />
                               <span className="font-medium">
-                                {control.referenceId}
+                                {control.sectionTitle}
                               </span>
                             </div>
                           </td>

apps/console/src/pages/organizations/measures/__generated__/MeasureViewFrameworksQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<f3d959452f28259f74fc44f4c1eedcb2>>
+ * @generated SignedSource<<dbee9bd358b3985bd5ae5f8630474534>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -23,7 +23,7 @@ export type MeasureViewFrameworksQuery$data = {
                 readonly description: string;
                 readonly id: string;
                 readonly name: string;
-                readonly referenceId: string;
+                readonly sectionTitle: string;
               };
             }>;
           };
@@ -130,7 +130,7 @@ v7 = [
             "alias": null,
             "args": null,
             "kind": "ScalarField",
-            "name": "referenceId",
+            "name": "sectionTitle",
             "storageKey": null
           },
           (v3/*: any*/),
@@ -331,7 +331,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "f32215939196e9e13f1347b57111f5cb",
+    "cacheID": "5dc8707d458fdb4ab9cf4967b716b85e",
     "id": null,
     "metadata": {
       "connection": [
@@ -354,11 +354,11 @@ return {
     },
     "name": "MeasureViewFrameworksQuery",
     "operationKind": "query",
-    "text": "query MeasureViewFrameworksQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    id\n    ... on Organization {\n      frameworks(first: 100) {\n        edges {\n          node {\n            id\n            name\n            controls(first: 100) {\n              edges {\n                node {\n                  id\n                  referenceId\n                  name\n                  description\n                  __typename\n                }\n                cursor\n              }\n              pageInfo {\n                endCursor\n                hasNextPage\n              }\n            }\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query MeasureViewFrameworksQuery(\n  $organizationId: ID!\n) {\n  organization: node(id: $organizationId) {\n    __typename\n    id\n    ... on Organization {\n      frameworks(first: 100) {\n        edges {\n          node {\n            id\n            name\n            controls(first: 100) {\n              edges {\n                node {\n                  id\n                  sectionTitle\n                  name\n                  description\n                  __typename\n                }\n                cursor\n              }\n              pageInfo {\n                endCursor\n                hasNextPage\n              }\n            }\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "f1183b14c80a91b160f222af00d49b6f";
+(node as any).hash = "106bc944729f346777ecf0182ac41ad3";
 
 export default node;

apps/console/src/pages/organizations/measures/__generated__/MeasureViewLinkedControlsQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<9b551f9e8f59a5ffe5c00700cdb59c88>>
+ * @generated SignedSource<<c82317e2abf68f766fe616c69437f338>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -20,7 +20,7 @@ export type MeasureViewLinkedControlsQuery$data = {
           readonly description: string;
           readonly id: string;
           readonly name: string;
-          readonly referenceId: string;
+          readonly sectionTitle: string;
         };
       }>;
     };
@@ -83,7 +83,7 @@ v4 = [
             "alias": null,
             "args": null,
             "kind": "ScalarField",
-            "name": "referenceId",
+            "name": "sectionTitle",
             "storageKey": null
           },
           {
@@ -235,7 +235,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "b4f524eea7ce57decf321b7efacdaa03",
+    "cacheID": "1d1f61565fa1616f441ad54c7b590200",
     "id": null,
     "metadata": {
       "connection": [
@@ -252,11 +252,11 @@ return {
     },
     "name": "MeasureViewLinkedControlsQuery",
     "operationKind": "query",
-    "text": "query MeasureViewLinkedControlsQuery(\n  $measureId: ID!\n) {\n  measure: node(id: $measureId) {\n    __typename\n    id\n    ... on Measure {\n      controls(first: 100) {\n        edges {\n          node {\n            id\n            referenceId\n            name\n            description\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query MeasureViewLinkedControlsQuery(\n  $measureId: ID!\n) {\n  measure: node(id: $measureId) {\n    __typename\n    id\n    ... on Measure {\n      controls(first: 100) {\n        edges {\n          node {\n            id\n            sectionTitle\n            name\n            description\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "5dfd96b1ab2edc5c8c654346046a968f";
+(node as any).hash = "5553b0d4c34e498e432315f8fa1dd805";
 
 export default node;

apps/console/src/pages/organizations/risks/ShowRiskView.tsx

@@ -110,7 +110,7 @@ const showRiskViewQuery = graphql`
           edges {
             node {
               id
-              referenceId
+              sectionTitle
               name
               description
               createdAt
@@ -1211,7 +1211,7 @@ function ShowRiskViewContent({
                             to={`/organizations/${organizationId}/controls/${control.id}`}
                             className="font-medium text-blue-600 hover:underline"
                           >
-                            {control.referenceId} - {control.name}
+                            {control.sectionTitle} - {control.name}
                           </Link>
                         </TableCell>
                       </TableRow>

apps/console/src/pages/organizations/risks/__generated__/ShowRiskViewQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<d43ef1981a6db6f7813e6587e3eaf192>>
+ * @generated SignedSource<<b49e4f8dc994a66c6e6c9450126028f5>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -23,7 +23,7 @@ export type ShowRiskViewQuery$data = {
           readonly description: string;
           readonly id: string;
           readonly name: string;
-          readonly referenceId: string;
+          readonly sectionTitle: string;
         };
       }>;
     };
@@ -323,7 +323,7 @@ v19 = [
             "alias": null,
             "args": null,
             "kind": "ScalarField",
-            "name": "referenceId",
+            "name": "sectionTitle",
             "storageKey": null
           },
           (v3/*: any*/),
@@ -514,7 +514,7 @@ return {
     ]
   },
   "params": {
-    "cacheID": "9d1057cf6eac37c07ed841a80a4604b9",
+    "cacheID": "fe20c6f4cd1e70c14bb099af7ecfffc2",
     "id": null,
     "metadata": {
       "connection": [
@@ -549,11 +549,11 @@ return {
     },
     "name": "ShowRiskViewQuery",
     "operationKind": "query",
-    "text": "query ShowRiskViewQuery(\n  $riskId: ID!\n) {\n  node(id: $riskId) {\n    __typename\n    id\n    ... on Risk {\n      name\n      description\n      treatment\n      owner {\n        id\n        fullName\n      }\n      inherentLikelihood\n      inherentImpact\n      residualLikelihood\n      residualImpact\n      note\n      createdAt\n      updatedAt\n      measures(first: 100) {\n        edges {\n          node {\n            id\n            name\n            description\n            category\n            createdAt\n            state\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            title\n            createdAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      controls(first: 100) {\n        edges {\n          node {\n            id\n            referenceId\n            name\n            description\n            createdAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query ShowRiskViewQuery(\n  $riskId: ID!\n) {\n  node(id: $riskId) {\n    __typename\n    id\n    ... on Risk {\n      name\n      description\n      treatment\n      owner {\n        id\n        fullName\n      }\n      inherentLikelihood\n      inherentImpact\n      residualLikelihood\n      residualImpact\n      note\n      createdAt\n      updatedAt\n      measures(first: 100) {\n        edges {\n          node {\n            id\n            name\n            description\n            category\n            createdAt\n            state\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            title\n            createdAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n      controls(first: 100) {\n        edges {\n          node {\n            id\n            sectionTitle\n            name\n            description\n            createdAt\n            __typename\n          }\n          cursor\n        }\n        pageInfo {\n          endCursor\n          hasNextPage\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "96763bbbebd3aa29a02fcf1e6e782293";
+(node as any).hash = "f1695786e4eb823466d6ebee4555cd9b";
 
 export default node;

pkg/coredata/control.go

@@ -29,7 +29,7 @@ import (
 type (
 	Control struct {
 		ID           gid.GID      `db:"id"`
-		ReferenceID string       `db:"reference_id"`
+		SectionTitle string       `db:"section_title"`
 		TenantID     gid.TenantID `db:"tenant_id"`
 		FrameworkID  gid.GID      `db:"framework_id"`
 		Name         string       `db:"name"`
@@ -41,9 +41,9 @@ type (
 	Controls []*Control
 
 	UpdateControlParams struct {
-		ExpectedVersion int
 		Name         *string
 		Description  *string
+		SectionTitle *string
 	}
 )
 
@@ -51,6 +51,8 @@ func (c Control) CursorKey(orderBy ControlOrderField) page.CursorKey {
 	switch orderBy {
 	case ControlOrderFieldCreatedAt:
 		return page.CursorKey{ID: c.ID, Value: c.CreatedAt}
+	case ControlOrderFieldSectionTitle:
+		return page.CursorKey{ID: c.ID, Value: c.SectionTitle}
 	}
 
 	panic(fmt.Sprintf("unsupported order by: %s", orderBy))
@@ -67,7 +69,7 @@ func (c *Controls) LoadByDocumentID(
 WITH ctrl AS (
 	SELECT
 		c.id,
-		c.reference_id,
+		c.section_title,
 		c.framework_id,
 		c.tenant_id,
 		c.name,
@@ -83,7 +85,7 @@ WITH ctrl AS (
 )
 SELECT
 	id,
-	reference_id,
+	section_title,
 	framework_id,
 	tenant_id,
 	name,
@@ -127,7 +129,7 @@ func (c *Controls) LoadByMeasureID(
 WITH ctrl AS (
 	SELECT
 		c.id,
-		c.reference_id,
+		c.section_title,
 		c.framework_id,
 		c.tenant_id,
 		c.name,
@@ -143,7 +145,7 @@ WITH ctrl AS (
 )
 SELECT
 	id,
-	reference_id,
+	section_title,
 	framework_id,
     tenant_id,
 	name,
@@ -186,7 +188,7 @@ func (c *Controls) LoadByRiskID(
 WITH ctrl AS (
 	SELECT DISTINCT
 		c.id,
-		c.reference_id,
+		c.section_title,
 		c.framework_id,
 		c.tenant_id,
 		c.name,
@@ -208,7 +210,7 @@ WITH ctrl AS (
 )
 SELECT
 	id,
-	reference_id,
+	section_title,
 	framework_id,
     tenant_id,
 	name,
@@ -251,7 +253,7 @@ func (c *Controls) LoadByFrameworkID(
 	q := `
 SELECT
     id,
-    reference_id,
+    section_title,
     framework_id,
     tenant_id,
     name,
@@ -285,17 +287,17 @@ WHERE
 	return nil
 }
 
-func (c *Control) LoadByFrameworkIDAndReferenceID(
+func (c *Control) LoadByFrameworkIDAndSectionTitle(
 	ctx context.Context,
 	conn pg.Conn,
 	scope Scoper,
 	frameworkID gid.GID,
-	referenceID string,
+	sectionTitle string,
 ) error {
 	q := `
 SELECT
     id,
-    reference_id,
+    section_title,
     framework_id,
     tenant_id,
     name,
@@ -307,12 +309,12 @@ FROM
 WHERE
     %s
     AND framework_id = @framework_id
-    AND reference_id = @reference_id
+    AND section_title = @section_title
 LIMIT 1;
 `
 	q = fmt.Sprintf(q, scope.SQLFragment())
 
-	args := pgx.StrictNamedArgs{"framework_id": frameworkID, "reference_id": referenceID}
+	args := pgx.StrictNamedArgs{"framework_id": frameworkID, "section_title": sectionTitle}
 	maps.Copy(args, scope.SQLArguments())
 	rows, err := conn.Query(ctx, q, args)
 	if err != nil {
@@ -338,7 +340,7 @@ func (c *Control) LoadByID(
 	q := `
 SELECT
     id,
-    reference_id,
+    section_title,
     framework_id,
     tenant_id,
     name,
@@ -382,7 +384,7 @@ INSERT INTO
         tenant_id,
         id,
         framework_id,
-        reference_id,
+        section_title,
         name,
         description,
         created_at,
@@ -392,7 +394,7 @@ VALUES (
     @tenant_id,
     @control_id,
     @framework_id,
-    @reference_id,
+    @section_title,
     @name,
     @description,
     @created_at,
@@ -404,7 +406,7 @@ VALUES (
 		"tenant_id":     scope.GetTenantID(),
 		"control_id":    c.ID,
 		"framework_id":  c.FrameworkID,
-		"reference_id": c.ReferenceID,
+		"section_title": c.SectionTitle,
 		"name":          c.Name,
 		"description":   c.Description,
 		"created_at":    c.CreatedAt,
@@ -446,6 +448,7 @@ func (c *Control) Update(
 UPDATE controls SET
     name = COALESCE(@name, name),
     description = COALESCE(@description, description),
+    section_title = COALESCE(@section_title, section_title),
     updated_at = @updated_at
 WHERE %s
     AND id = @control_id
@@ -455,6 +458,7 @@ RETURNING
     tenant_id,
     name,
     description,
+	section_title,
     created_at,
     updated_at
 `
@@ -462,7 +466,7 @@ RETURNING
 
 	args := pgx.StrictNamedArgs{
 		"control_id":    c.ID,
-		"expected_version": params.ExpectedVersion,
+		"section_title": params.SectionTitle,
 		"updated_at":    time.Now(),
 	}
 

pkg/coredata/control_order_field.go

@@ -20,11 +20,19 @@ type (
 
 const (
 	ControlOrderFieldCreatedAt    ControlOrderField = "CREATED_AT"
+	ControlOrderFieldSectionTitle ControlOrderField = "SECTION_TITLE"
 )
 
 func (p ControlOrderField) Column() string {
+	switch p {
+	case ControlOrderFieldCreatedAt:
+		return "created_at"
+	case ControlOrderFieldSectionTitle:
+		return "section_title_sort_key(section_title)"
+	default:
 		return string(p)
 	}
+}
 
 func (p ControlOrderField) String() string {
 	return string(p)

pkg/coredata/migrations/20250605T233149Z.sql

@@ -0,0 +1,34 @@
+ALTER TABLE controls DROP COLUMN version;
+
+ALTER TABLE controls RENAME COLUMN reference_id TO section_title;
+
+CREATE OR REPLACE FUNCTION section_title_sort_key(text) RETURNS text AS $$
+DECLARE
+    result text := '';
+    matches text[];
+    remainder text := $1;
+BEGIN
+    WHILE remainder ~ '\d+' LOOP
+        -- Extract text before the number
+        result := result || substring(remainder FROM '^[^\d]*');
+
+        -- Extract and pad the next number
+        matches := regexp_matches(remainder, '(\d+)', '');  -- captures the first number
+        IF matches IS NOT NULL THEN
+            result := result || lpad(matches[1], 10, '0');
+            -- Remove processed part from remainder
+            remainder := substring(remainder FROM '\d+(.*)$');
+        ELSE
+            EXIT;
+        END IF;
+    END LOOP;
+
+    -- Append any remaining non-digit text
+    result := result || remainder;
+
+    RETURN result;
+END;
+$$ LANGUAGE plpgsql IMMUTABLE STRICT;
+
+COMMENT ON FUNCTION section_title_sort_key(text) IS
+    'Converts numbers in strings to zero-padded format for natural sorting';

pkg/probo/control_service.go

@@ -35,13 +35,14 @@ type (
 		FrameworkID  gid.GID
 		Name         string
 		Description  string
+		SectionTitle string
 	}
 
 	UpdateControlRequest struct {
 		ID           gid.GID
-		ExpectedVersion int
 		Name         *string
 		Description  *string
+		SectionTitle *string
 	}
 
 	ConnectControlToMitigationRequest struct {
@@ -263,11 +264,12 @@ func (s ControlService) Create(
 	framework := &coredata.Framework{}
 
 	control := &coredata.Control{
-		ID:          req.ID,
+		ID:           gid.New(s.svc.scope.GetTenantID(), coredata.ControlEntityType),
 		FrameworkID:  req.FrameworkID,
 		TenantID:     s.svc.scope.GetTenantID(),
 		Name:         req.Name,
 		Description:  req.Description,
+		SectionTitle: req.SectionTitle,
 		CreatedAt:    now,
 		UpdatedAt:    now,
 	}
@@ -317,9 +319,9 @@ func (s ControlService) Update(
 	req UpdateControlRequest,
 ) (*coredata.Control, error) {
 	params := coredata.UpdateControlParams{
-		ExpectedVersion: req.ExpectedVersion,
 		Name:         req.Name,
 		Description:  req.Description,
+		SectionTitle: req.SectionTitle,
 	}
 
 	control := &coredata.Control{ID: req.ID}

pkg/probo/framework_service.go

@@ -244,7 +244,7 @@ func (s FrameworkService) Import(
 					ID:           controlID,
 					TenantID:     organizationID.TenantID(),
 					FrameworkID:  frameworkID,
-					ReferenceID: control.ID,
+					SectionTitle: control.ID,
 					Name:         control.Name,
 					Description:  control.Description,
 					CreatedAt:    now,
@@ -307,7 +307,7 @@ func (s FrameworkService) ExportAudit(
 			}
 
 			for _, control := range controls {
-				controlDir := filepath.Join(exportDir, control.ReferenceID)
+				controlDir := filepath.Join(exportDir, filepath.Base(control.SectionTitle))
 				if err := os.MkdirAll(controlDir, 0755); err != nil {
 					return fmt.Errorf("cannot create control directory: %w", err)
 				}
@@ -344,7 +344,7 @@ func (s FrameworkService) ExportAudit(
 				}
 
 				for _, document := range documents {
-					documentDir := filepath.Join(controlDir, document.Title)
+					documentDir := filepath.Join(controlDir, filepath.Base(document.Title))
 					if err := os.MkdirAll(documentDir, 0755); err != nil {
 						return fmt.Errorf("cannot create document directory: %w", err)
 					}
@@ -361,13 +361,13 @@ func (s FrameworkService) ExportAudit(
 				}
 
 				for _, measure := range measures {
-					measureDir := filepath.Join(controlDir, measure.Name)
+					measureDir := filepath.Join(controlDir, filepath.Base(measure.Name))
 					if err := os.MkdirAll(measureDir, 0755); err != nil {
 						return fmt.Errorf("cannot create measure directory: %w", err)
 					}
 
 					evidences := coredata.Evidences{}
-					cursor := page.NewCursor(
+					evidenceCursor := page.NewCursor(
 						0,
 						nil,
 						page.Head,
@@ -377,12 +377,12 @@ func (s FrameworkService) ExportAudit(
 						},
 					)
 
-					if err := evidences.LoadByMeasureID(ctx, conn, s.svc.scope, measure.ID, cursor); err != nil {
+					if err := evidences.LoadByMeasureID(ctx, conn, s.svc.scope, measure.ID, evidenceCursor); err != nil {
 						return fmt.Errorf("cannot load evidences: %w", err)
 					}
 
 					for _, evidence := range evidences {
-						evidenceFile := filepath.Join(measureDir, evidence.Filename)
+						evidenceFile := filepath.Join(measureDir, filepath.Base(evidence.Filename))
 
 						if evidence.Type == coredata.EvidenceTypeFile && evidence.ObjectKey != "" {
 							output, err := s.svc.s3.GetObject(

pkg/probo/measure_service.go

@@ -235,7 +235,7 @@ func (s MeasureService) Import(
 					}
 
 					control := &coredata.Control{}
-					if err := control.LoadByFrameworkIDAndReferenceID(ctx, tx, s.svc.scope, framework.ID, standard.Control); err != nil {
+					if err := control.LoadByFrameworkIDAndSectionTitle(ctx, tx, s.svc.scope, framework.ID, standard.Control); err != nil {
 						continue
 					}
 

pkg/server/api/console/v1/schema.graphql

@@ -169,6 +169,10 @@ enum ControlOrderField
     @goEnum(
       value: "github.com/getprobo/probo/pkg/coredata.ControlOrderFieldCreatedAt"
     )
+  SECTION_TITLE
+    @goEnum(
+      value: "github.com/getprobo/probo/pkg/coredata.ControlOrderFieldSectionTitle"
+    )
 }
 
 enum MeasureOrderField
@@ -683,7 +687,7 @@ type Framework implements Node {
 
 type Control implements Node {
   id: ID!
-  referenceId: String!
+  sectionTitle: String!
   name: String!
   description: String!
 
@@ -1087,6 +1091,11 @@ type Mutation {
   importFramework(input: ImportFrameworkInput!): ImportFrameworkPayload!
   deleteFramework(input: DeleteFrameworkInput!): DeleteFrameworkPayload!
 
+  # Control mutations
+  createControl(input: CreateControlInput!): CreateControlPayload!
+  updateControl(input: UpdateControlInput!): UpdateControlPayload!
+  deleteControl(input: DeleteControlInput!): DeleteControlPayload!
+
   # Measure mutations
   createMeasure(input: CreateMeasureInput!): CreateMeasurePayload!
   updateMeasure(input: UpdateMeasureInput!): UpdateMeasurePayload!
@@ -1502,6 +1511,24 @@ input RemoveUserInput {
   userId: ID!
 }
 
+input CreateControlInput {
+  frameworkId: ID!
+  sectionTitle: String!
+  name: String!
+  description: String!
+}
+
+input UpdateControlInput {
+  id: ID!
+  sectionTitle: String
+  name: String
+  description: String
+}
+
+input DeleteControlInput {
+  controlId: ID!
+}
+
 # Payload Types
 type CreateOrganizationPayload {
   organizationEdge: OrganizationEdge!
@@ -1515,6 +1542,18 @@ type DeleteOrganizationPayload {
   deletedOrganizationId: ID!
 }
 
+type CreateControlPayload {
+  controlEdge: ControlEdge!
+}
+
+type UpdateControlPayload {
+  control: Control!
+}
+
+type DeleteControlPayload {
+  deletedControlId: ID!
+}
+
 type CreateVendorPayload {
   vendorEdge: VendorEdge!
 }

pkg/server/api/console/v1/types/control.go

@@ -46,7 +46,7 @@ func NewControlEdge(c *coredata.Control, orderBy coredata.ControlOrderField) *Co
 func NewControl(c *coredata.Control) *Control {
 	return &Control{
 		ID:           c.ID,
-		ReferenceID: c.ReferenceID,
+		SectionTitle: c.SectionTitle,
 		Name:         c.Name,
 		Description:  c.Description,
 		CreatedAt:    c.CreatedAt,

pkg/server/api/console/v1/types/types.go

@@ -120,7 +120,7 @@ type ConnectorOrder struct {
 
 type Control struct {
 	ID           gid.GID             `json:"id"`
-	ReferenceID string              `json:"referenceId"`
+	SectionTitle string              `json:"sectionTitle"`
 	Name         string              `json:"name"`
 	Description  string              `json:"description"`
 	Framework    *Framework          `json:"framework"`
@@ -168,6 +168,13 @@ type CreateControlDocumentMappingPayload struct {
 	DocumentEdge *DocumentEdge `json:"documentEdge"`
 }
 
+type CreateControlInput struct {
+	FrameworkID  gid.GID `json:"frameworkId"`
+	SectionTitle string  `json:"sectionTitle"`
+	Name         string  `json:"name"`
+	Description  string  `json:"description"`
+}
+
 type CreateControlMeasureMappingInput struct {
 	ControlID gid.GID `json:"controlId"`
 	MeasureID gid.GID `json:"measureId"`
@@ -178,6 +185,10 @@ type CreateControlMeasureMappingPayload struct {
 	MeasureEdge *MeasureEdge `json:"measureEdge"`
 }
 
+type CreateControlPayload struct {
+	ControlEdge *ControlEdge `json:"controlEdge"`
+}
+
 type CreateDatumInput struct {
 	OrganizationID  gid.GID                  `json:"organizationId"`
 	Name            string                   `json:"name"`
@@ -406,6 +417,10 @@ type DeleteControlDocumentMappingPayload struct {
 	DeletedDocumentID gid.GID `json:"deletedDocumentId"`
 }
 
+type DeleteControlInput struct {
+	ControlID gid.GID `json:"controlId"`
+}
+
 type DeleteControlMeasureMappingInput struct {
 	ControlID gid.GID `json:"controlId"`
 	MeasureID gid.GID `json:"measureId"`
@@ -416,6 +431,10 @@ type DeleteControlMeasureMappingPayload struct {
 	DeletedMeasureID gid.GID `json:"deletedMeasureId"`
 }
 
+type DeleteControlPayload struct {
+	DeletedControlID gid.GID `json:"deletedControlId"`
+}
+
 type DeleteDatumInput struct {
 	DatumID gid.GID `json:"datumId"`
 }
@@ -980,6 +999,17 @@ type UpdateAssetPayload struct {
 	Asset *Asset `json:"asset"`
 }
 
+type UpdateControlInput struct {
+	ID           gid.GID `json:"id"`
+	SectionTitle *string `json:"sectionTitle,omitempty"`
+	Name         *string `json:"name,omitempty"`
+	Description  *string `json:"description,omitempty"`
+}
+
+type UpdateControlPayload struct {
+	Control *Control `json:"control"`
+}
+
 type UpdateDatumInput struct {
 	ID              gid.GID                   `json:"id"`
 	Name            *string                   `json:"name,omitempty"`

pkg/server/api/console/v1/v1_resolver.go

@@ -967,6 +967,59 @@ func (r *mutationResolver) DeleteFramework(ctx context.Context, input types.Dele
 	}, nil
 }
 
+// CreateControl is the resolver for the createControl field.
+func (r *mutationResolver) CreateControl(ctx context.Context, input types.CreateControlInput) (*types.CreateControlPayload, error) {
+	svc := GetTenantService(ctx, r.proboSvc, input.FrameworkID.TenantID())
+
+	control, err := svc.Controls.Create(ctx, probo.CreateControlRequest{
+		FrameworkID:  input.FrameworkID,
+		Name:         input.Name,
+		Description:  input.Description,
+		SectionTitle: input.SectionTitle,
+	})
+	if err != nil {
+		return nil, fmt.Errorf("cannot create control: %w", err)
+	}
+
+	return &types.CreateControlPayload{
+		ControlEdge: types.NewControlEdge(control, coredata.ControlOrderFieldCreatedAt),
+	}, nil
+}
+
+// UpdateControl is the resolver for the updateControl field.
+func (r *mutationResolver) UpdateControl(ctx context.Context, input types.UpdateControlInput) (*types.UpdateControlPayload, error) {
+	svc := GetTenantService(ctx, r.proboSvc, input.ID.TenantID())
+
+	control, err := svc.Controls.Update(ctx, probo.UpdateControlRequest{
+		ID:           input.ID,
+		Name:         input.Name,
+		Description:  input.Description,
+		SectionTitle: input.SectionTitle,
+	})
+
+	if err != nil {
+		return nil, fmt.Errorf("cannot update control: %w", err)
+	}
+
+	return &types.UpdateControlPayload{
+		Control: types.NewControl(control),
+	}, nil
+}
+
+// DeleteControl is the resolver for the deleteControl field.
+func (r *mutationResolver) DeleteControl(ctx context.Context, input types.DeleteControlInput) (*types.DeleteControlPayload, error) {
+	svc := GetTenantService(ctx, r.proboSvc, input.ControlID.TenantID())
+
+	err := svc.Controls.Delete(ctx, input.ControlID)
+	if err != nil {
+		return nil, fmt.Errorf("cannot delete control: %w", err)
+	}
+
+	return &types.DeleteControlPayload{
+		DeletedControlID: input.ControlID,
+	}, nil
+}
+
 // // CreateMeasure is the resolver for the createMeasure field.
 func (r *mutationResolver) CreateMeasure(ctx context.Context, input types.CreateMeasureInput) (*types.CreateMeasurePayload, error) {
 	svc := GetTenantService(ctx, r.proboSvc, input.OrganizationID.TenantID())