Fix apps/console lint issues

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/__generated__/core/NewDomainDialogMutation.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<098714fcfe212fae40bdad19b10f8a00>>
+ * @generated SignedSource<<d78dfc5b8db81e410f3f606fb91cd137>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -20,6 +20,7 @@ export type NewDomainDialogMutation$variables = {
 export type NewDomainDialogMutation$data = {
   readonly createCustomDomain: {
     readonly customDomain: {
+      readonly canDelete: boolean;
       readonly createdAt: string;
       readonly dnsRecords: ReadonlyArray<{
         readonly name: string;
@@ -159,6 +160,19 @@ v1 = [
             "kind": "ScalarField",
             "name": "sslExpiresAt",
             "storageKey": null
+          },
+          {
+            "alias": "canDelete",
+            "args": [
+              {
+                "kind": "Literal",
+                "name": "action",
+                "value": "core:custom-domain:delete"
+              }
+            ],
+            "kind": "ScalarField",
+            "name": "permission",
+            "storageKey": "permission(action:\"core:custom-domain:delete\")"
           }
         ],
         "storageKey": null
@@ -185,16 +199,16 @@ return {
     "selections": (v1/*: any*/)
   },
   "params": {
-    "cacheID": "b8aa27fe9ab3442dea9b96a70966524b",
+    "cacheID": "39d421d36a6418d0ee687d43b9d7a7ee",
     "id": null,
     "metadata": {},
     "name": "NewDomainDialogMutation",
     "operationKind": "mutation",
-    "text": "mutation NewDomainDialogMutation(\n  $input: CreateCustomDomainInput!\n) {\n  createCustomDomain(input: $input) {\n    customDomain {\n      id\n      domain\n      sslStatus\n      dnsRecords {\n        type\n        name\n        value\n        ttl\n        purpose\n      }\n      createdAt\n      updatedAt\n      sslExpiresAt\n    }\n  }\n}\n"
+    "text": "mutation NewDomainDialogMutation(\n  $input: CreateCustomDomainInput!\n) {\n  createCustomDomain(input: $input) {\n    customDomain {\n      id\n      domain\n      sslStatus\n      dnsRecords {\n        type\n        name\n        value\n        ttl\n        purpose\n      }\n      createdAt\n      updatedAt\n      sslExpiresAt\n      canDelete: permission(action: \"core:custom-domain:delete\")\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "f49cd22c5d6656e662fad5afab6fc344";
+(node as any).hash = "37ef764ab4f78a6898f06d00374347ee";
 
 export default node;

apps/console/src/components/PageError.tsx

@@ -26,8 +26,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
   // Reset error boundary on page change
   useEffect(() => {
     if (
-      location.pathname !== baseLocation.current.pathname &&
-      resetErrorBoundary
+      location.pathname !== baseLocation.current.pathname
+      && resetErrorBoundary
     ) {
       resetErrorBoundary();
     }
@@ -54,7 +54,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (!error || (error && error.toString().includes("PAGE_NOT_FOUND"))) {
+  if (!error || (error instanceof Error && error.message.includes("PAGE_NOT_FOUND"))) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -68,7 +68,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (error && error.toString().includes("FORBIDDEN")) {
+  if (error instanceof Error && error.message.includes("FORBIDDEN")) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -82,7 +82,7 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
     );
   }
 
-  if (error && error.toString().includes("UNAUTHORIZED")) {
+  if (error instanceof Error && error.message.includes("UNAUTHORIZED")) {
     return (
       <div className={classNames.wrapper}>
         <h1 className={classNames.title}>
@@ -103,7 +103,8 @@ export function PageError({ resetErrorBoundary, error: propsError }: Props) {
         <summary className={classNames.description}>
           {__("Something went wrong")}
         </summary>
-        <p className={classNames.detail}>{error.toString()}</p>
+        {error instanceof Error
+          && <p className={classNames.detail}>{error.message}</p>}
       </details>
     </div>
   );

apps/console/src/components/SnapshotBanner.tsx

@@ -46,8 +46,8 @@ export function SnapshotBanner({ snapshotId }: Props) {
   }
 
   if (
-    snapshot.type &&
-    !isSnapshotTypeValidForUrl(snapshot.type, location.pathname)
+    snapshot.type
+    && !isSnapshotTypeValidForUrl(snapshot.type, location.pathname)
   ) {
     throw new Error("PAGE_NOT_FOUND");
   }
@@ -58,7 +58,9 @@ export function SnapshotBanner({ snapshotId }: Props) {
       <div className="flex-1">
         <div className="flex items-center gap-2 mb-1">
           <span className="font-medium text-warning-800">
-            {__("Snapshot")} {snapshot.name}
+            {__("Snapshot")}
+            {" "}
+            {snapshot.name}
           </span>
         </div>
         <p className="text-sm text-warning-700">

apps/console/src/components/assets/AssetsTable.tsx

@@ -141,7 +141,7 @@ export function AssetsTable(props: Props) {
           <VendorsCell
             name="vendorIds"
             organizationId={organizationId}
-            defaultValue={item?.vendors?.edges?.map((edge) => edge.node) ?? []}
+            defaultValue={item?.vendors?.edges?.map(edge => edge.node) ?? []}
           />
         </>
       )}
@@ -163,7 +163,7 @@ const useDeleteAsset = (connectionId: string) => {
         promisifyMutation(mutate)({
           variables: {
             input: {
-              assetId: asset.id!,
+              assetId: asset.id,
             },
             connections: [connectionId],
           },
@@ -171,7 +171,7 @@ const useDeleteAsset = (connectionId: string) => {
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           asset.name,
         ),

apps/console/src/components/assets/ReadOnlyAssetsTable.tsx

@@ -39,7 +39,7 @@ export function ReadOnlyAssetsTable(props: Props) {
         </Tr>
       </Thead>
       <Tbody>
-        {assets.map((entry) => (
+        {assets.map(entry => (
           <AssetRow key={entry.id} entry={entry} />
         ))}
       </Tbody>
@@ -51,7 +51,7 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
   const { snapshotId } = useParams<{ snapshotId?: string }>();
-  const vendors = entry.vendors?.edges.map((edge) => edge.node) ?? [];
+  const vendors = entry.vendors?.edges.map(edge => edge.node) ?? [];
 
   return (
     <Tr
@@ -70,31 +70,34 @@ function AssetRow({ entry }: { entry: AssetEntry }) {
       <Td>{entry.amount}</Td>
       <Td>{entry.owner?.fullName ?? __("Unassigned")}</Td>
       <Td>
-        {vendors.length > 0 ? (
-          <div className="flex flex-wrap gap-1">
-            {vendors.slice(0, 3).map((vendor) => (
-              <Badge
-                key={vendor.id}
-                variant="neutral"
-                className="flex items-center gap-1"
-              >
-                <Avatar
-                  name={vendor.name}
-                  src={faviconUrl(vendor.websiteUrl)}
-                  size="s"
-                />
-                <span className="text-xs">{vendor.name}</span>
-              </Badge>
-            ))}
-            {vendors.length > 3 && (
-              <Badge variant="neutral" className="text-xs">
-                +{vendors.length - 3}
-              </Badge>
+        {vendors.length > 0
+          ? (
+              <div className="flex flex-wrap gap-1">
+                {vendors.slice(0, 3).map(vendor => (
+                  <Badge
+                    key={vendor.id}
+                    variant="neutral"
+                    className="flex items-center gap-1"
+                  >
+                    <Avatar
+                      name={vendor.name}
+                      src={faviconUrl(vendor.websiteUrl)}
+                      size="s"
+                    />
+                    <span className="text-xs">{vendor.name}</span>
+                  </Badge>
+                ))}
+                {vendors.length > 3 && (
+                  <Badge variant="neutral" className="text-xs">
+                    +
+                    {vendors.length - 3}
+                  </Badge>
+                )}
+              </div>
+            )
+          : (
+              <span className="text-txt-secondary text-sm">{__("None")}</span>
             )}
-          </div>
-        ) : (
-          <span className="text-txt-secondary text-sm">{__("None")}</span>
-        )}
       </Td>
     </Tr>
   );

apps/console/src/components/audits/LinkedAuditsCard.tsx

@@ -131,7 +131,7 @@ export function LinkedAuditsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {audits.map((audit) => (
+          {audits.map(audit => (
             <AuditRow
               key={audit.id}
               audit={audit}

apps/console/src/components/audits/LinkedAuditsDialog.tsx

@@ -104,15 +104,15 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const audits = useMemo(
-    () => data.audits?.edges?.map((edge) => edge.node) ?? [],
+    () => data.audits?.edges?.map(edge => edge.node) ?? [],
     [data.audits],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedAudits?.map((a) => a.id) ?? []);
+    return new Set(props.linkedAudits?.map(a => a.id) ?? []);
   }, [props.linkedAudits]);
 
   const filteredAudits = useMemo(() => {
-    return audits.filter((audit) =>
+    return audits.filter(audit =>
       (audit.name || "").toLowerCase().includes(search.toLowerCase()),
     );
   }, [audits, search]);
@@ -127,7 +127,7 @@ function LinkedAuditsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredAudits.map((audit) => (
+        {filteredAudits.map(audit => (
           <AuditRow
             key={audit.id}
             audit={audit}
@@ -186,7 +186,9 @@ function AuditRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

apps/console/src/components/controls/LinkedControlsCard.tsx

@@ -111,7 +111,7 @@ export function LinkedControlsCard<Params>(props: Props<Params>) {
             </Td>
           </Tr>
         )}
-        {controls.map((control) => (
+        {controls.map(control => (
           <ControlRow
             key={control.id}
             control={control}
@@ -152,7 +152,8 @@ function ControlRow(props: {
     >
       <Td>
         <span className="inline-flex gap-2 items-center">
-          {control.framework.name}{" "}
+          {control.framework.name}
+          {" "}
           <Badge size="md">{control.sectionTitle}</Badge>
         </span>
       </Td>

apps/console/src/components/controls/LinkedControlsDialog.tsx

@@ -12,6 +12,7 @@ import {
 } from "@probo/ui";
 import {
   Suspense,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -104,11 +105,11 @@ export function LinkedControlsDialog(props: Props) {
         </div>
         <div ref={contentRef}>
           <Suspense
-            fallback={
+            fallback={(
               <div style={{ minHeight }}>
                 <Spinner centered />
               </div>
-            }
+            )}
           >
             <LinkedControlsDialogContent {...props} ref={searchRef} />
           </Suspense>
@@ -123,32 +124,37 @@ function LinkedControlsDialogContent(props: Props & { ref: SearchRef }) {
   const mainData = useLazyLoadQuery<LinkedControlsDialogQuery>(query, {
     organizationId,
   });
-  const { data, loadNext, hasNext, isLoadingNext, refetch } =
-    usePaginationFragment(
-      controlsFragment,
-      mainData.organization as LinkedControlsDialogFragment$key,
-    );
+  const { data, loadNext, hasNext, isLoadingNext, refetch } = usePaginationFragment(
+    controlsFragment,
+    mainData.organization as LinkedControlsDialogFragment$key,
+  );
 
-  const controls = data.controls?.edges?.map((edge) => edge.node) ?? [];
+  const controls = data.controls?.edges?.map(edge => edge.node) ?? [];
   const controlIds = useMemo(() => {
-    return new Set(props.linkedControls?.map((c) => c.id) ?? []);
+    return new Set(props.linkedControls?.map(c => c.id) ?? []);
   }, [props.linkedControls]);
 
-  props.ref.current = {
-    search: useDebounceCallback((v: string) => {
-      refetch({
-        first: 20,
-        filter: {
-          query: v,
-        },
-      });
-    }, 500),
-  };
+  const handleSearch = useDebounceCallback((v: string) => {
+    refetch({
+      first: 20,
+      filter: {
+        query: v,
+      },
+    });
+  }, 500);
+
+  useEffect(() => {
+    if (!props.ref.current) {
+      props.ref.current = {
+        search: handleSearch,
+      };
+    }
+  });
 
   return (
     <>
       <div className="divide-y divide-border-low">
-        {controls.map((control) => (
+        {controls.map(control => (
           <ControlRow
             key={control.id}
             control={control}
@@ -182,7 +188,10 @@ function ControlRow(
       className="py-4 flex items-center gap-4 hover:bg-subtle cursor-pointer px-6 w-full text-start"
       onClick={() => onClick(props.control.id)}
     >
-      {props.control.sectionTitle} : {props.control.name}
+      {props.control.sectionTitle}
+      {" "}
+      :
+      {props.control.name}
       <Badge>{props.control.framework.name}</Badge>
       <Button
         disabled={props.disabled}
@@ -191,7 +200,9 @@ function ControlRow(
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

apps/console/src/components/documents/BulkExportDialog.tsx

@@ -35,7 +35,7 @@ type BulkExportFormData = z.infer<typeof bulkExportSchema>;
 
 type Props = {
   children: ReactNode;
-  onExport: (options: BulkExportFormData) => void;
+  onExport: (options: BulkExportFormData) => Promise<void>;
   isLoading?: boolean;
   defaultEmail: string;
   selectedCount: number;
@@ -59,7 +59,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
           watermarkEmail: defaultEmail,
           withSignatures: true,
         },
-      }
+      },
     );
 
     const watchWatermark = watch("withWatermark");
@@ -70,14 +70,14 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
       close: () => dialogRef.current?.close(),
     }));
 
-    const onSubmit = handleSubmit((data) => {
+    const onSubmit = async (data: BulkExportFormData) => {
       const options = {
         ...data,
         watermarkEmail: data.withWatermark ? data.watermarkEmail : undefined,
       };
-      onExport(options);
+      await onExport(options);
       dialogRef.current?.close();
-    });
+    };
 
     return (
       <>
@@ -87,13 +87,13 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
           ref={dialogRef}
           title={sprintf(__("Export %s Documents"), selectedCount)}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
               <div className="space-y-4">
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchSignatures}
-                    onChange={(checked) => setValue("withSignatures", checked)}
+                    onChange={checked => setValue("withSignatures", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -108,7 +108,7 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchWatermark}
-                    onChange={(checked) => setValue("withWatermark", checked)}
+                    onChange={checked => setValue("withWatermark", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -146,19 +146,23 @@ export const BulkExportDialog = forwardRef<BulkExportDialogRef, Props>(
                 type="submit"
                 disabled={isLoading}
               >
-                {isLoading ? (
-                  <>
-                    <Spinner size={16} />
-                    {__("Exporting...")}
-                  </>
-                ) : (
-                  __("Export Documents")
-                )}
+                {isLoading
+                  ? (
+                      <>
+                        <Spinner size={16} />
+                        {__("Exporting...")}
+                      </>
+                    )
+                  : (
+                      __("Export Documents")
+                    )}
               </Button>
             </DialogFooter>
           </form>
         </Dialog>
       </>
     );
-  }
+  },
 );
+
+BulkExportDialog.displayName = "BulkExportDialog";

apps/console/src/components/documents/LinkedDocumentsCard.tsx

@@ -145,7 +145,7 @@ export function LinkedDocumentsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {documents.map((document) => (
+          {documents.map(document => (
             <DocumentRow
               key={document.id}
               document={document}

apps/console/src/components/documents/LinkedDocumentsDialog.tsx

@@ -102,15 +102,15 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const documents = useMemo(
-    () => data.documents?.edges?.map((edge) => edge.node) ?? [],
+    () => data.documents?.edges?.map(edge => edge.node) ?? [],
     [data.documents],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedDocuments?.map((m) => m.id) ?? []);
+    return new Set(props.linkedDocuments?.map(m => m.id) ?? []);
   }, [props.linkedDocuments]);
 
   const filteredDocuments = useMemo(() => {
-    return documents.filter((document) =>
+    return documents.filter(document =>
       document.title.toLowerCase().includes(search.toLowerCase()),
     );
   }, [documents, search]);
@@ -125,7 +125,7 @@ function LinkedDocumentsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredDocuments.map((document) => (
+        {filteredDocuments.map(document => (
           <DocumentRow
             key={document.id}
             document={document}
@@ -177,7 +177,9 @@ function DocumentRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

apps/console/src/components/documents/PDFPreview.tsx

@@ -15,8 +15,8 @@ import { IconMinusLarge } from "@probo/ui/src/Atoms/Icons/IconMinusLarge.tsx";
 // Worker for PDF.js
 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
 
-const btnClass =
-  "size-8 grid place-items-center hover:bg-secondary-hover cursor-pointer rounded-sm disabled:opacity-30 transition-all";
+const btnClass
+  = "size-8 grid place-items-center hover:bg-secondary-hover cursor-pointer rounded-sm disabled:opacity-30 transition-all";
 
 export function PDFPreview({ src, name }: { src: string; name?: string }) {
   const [numPages, setNumPages] = useState(0);
@@ -92,7 +92,10 @@ export function PDFPreview({ src, name }: { src: string; name?: string }) {
             <IconChevronLeft size={16} />
           </button>
           <div>
-            {currentPage} / {numPages}
+            {currentPage}
+            {" "}
+            /
+            {numPages}
           </div>
           <button onClick={movePage(1)} className={btnClass}>
             <IconChevronRight size={16} />
@@ -123,7 +126,7 @@ export function PDFPreview({ src, name }: { src: string; name?: string }) {
           ref={documentRef}
         >
           {numPages === 0 && <Spinner className="mx-auto" />}
-          {times(numPages, (index) => (
+          {times(numPages, index => (
             <Page
               className="w-max h-max mx-auto shadow-mid"
               key={index.toString()}

apps/console/src/components/documents/PdfDownloadDialog.tsx

@@ -42,8 +42,8 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
     const { __ } = useTranslate();
     const dialogRef = useDialogRef();
 
-    const { register, handleSubmit, formState, watch, setValue } =
-      useFormWithSchema(pdfDownloadSchema, {
+    const { register, handleSubmit, formState, watch, setValue }
+      = useFormWithSchema(pdfDownloadSchema, {
         defaultValues: {
           withWatermark: false,
           watermarkEmail: defaultEmail,
@@ -59,14 +59,14 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
       close: () => dialogRef.current?.close(),
     }));
 
-    const onSubmit = handleSubmit((data) => {
+    const onSubmit = (data: PdfDownloadFormData) => {
       const options = {
         ...data,
         watermarkEmail: data.withWatermark ? data.watermarkEmail : undefined,
       };
       onDownload(options);
       dialogRef.current?.close();
-    });
+    };
 
     return (
       <>
@@ -76,13 +76,13 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
           ref={dialogRef}
           title={__("Download PDF Options")}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent className="space-y-4" padded>
               <div className="space-y-4">
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchSignatures}
-                    onChange={(checked) => setValue("withSignatures", checked)}
+                    onChange={checked => setValue("withSignatures", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -99,7 +99,7 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
                 <div className="flex items-start gap-3">
                   <Checkbox
                     checked={watchWatermark}
-                    onChange={(checked) => setValue("withWatermark", checked)}
+                    onChange={checked => setValue("withWatermark", checked)}
                   />
                   <div className="flex-1">
                     <label className="text-sm font-medium text-txt-primary cursor-pointer">
@@ -130,14 +130,16 @@ export const PdfDownloadDialog = forwardRef<PdfDownloadDialogRef, Props>(
             </DialogContent>
             <DialogFooter>
               <Button type="submit" disabled={isLoading}>
-                {isLoading ? (
-                  <>
-                    <Spinner size={16} />
-                    {__("Downloading...")}
-                  </>
-                ) : (
-                  __("Download PDF")
-                )}
+                {isLoading
+                  ? (
+                      <>
+                        <Spinner size={16} />
+                        {__("Downloading...")}
+                      </>
+                    )
+                  : (
+                      __("Download PDF")
+                    )}
               </Button>
             </DialogFooter>
           </form>

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

@@ -74,10 +74,10 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
     { organizationId },
     { fetchPolicy: "network-only" },
   );
-  const audits =
-    data?.organization?.audits?.edges
-      ?.map((edge) => edge.node)
-      .filter((node) => node !== null) ?? [];
+  const audits
+    = data?.organization?.audits?.edges
+      ?.map(edge => edge.node)
+      .filter(node => node !== null) ?? [];
 
   const NONE_VALUE = "__NONE__";
 
@@ -91,9 +91,8 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           id={name}
           variant="editor"
           placeholder={__("Select an audit")}
-          onValueChange={(value) =>
-            field.onChange(value === NONE_VALUE ? "" : value)
-          }
+          onValueChange={value =>
+            field.onChange(value === NONE_VALUE ? "" : value)}
           key={audits?.length.toString() ?? "0"}
           {...field}
           className="w-full"
@@ -102,7 +101,7 @@ function AuditSelectWithQuery<T extends FieldValues = FieldValues>(
           <Option value={NONE_VALUE}>
             <span className="text-txt-tertiary">{__("None")}</span>
           </Option>
-          {audits?.map((audit) => (
+          {audits?.map(audit => (
             <Option key={audit.id} value={audit.id}>
               <div className="flex items-center justify-between w-full">
                 <span>

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

@@ -1,18 +1,25 @@
 import type { ComponentProps } from "react";
 import { Field } from "@probo/ui";
-import { Controller, type FieldValues } from "react-hook-form";
+import { Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { Select } from "@probo/ui";
 
-type Props<T extends typeof Field | typeof Select, TFieldValues extends FieldValues = FieldValues> =
-  ComponentProps<T> & Omit<ComponentProps<typeof Controller<TFieldValues>>, "render">;
+type Props<
+  T extends typeof Field | typeof Select,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>
+  = ComponentProps<T> & Omit<ComponentProps<typeof Controller<TFieldValues, TName>>, "render">;
 
-export function ControlledField<TFieldValues extends FieldValues = FieldValues>({
+export function ControlledField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
   control,
   name,
   ...props
-}: Props<typeof Field, TFieldValues>) {
+}: Props<typeof Field, TFieldValues, TName>) {
   return (
-    <Controller
+    <Controller<TFieldValues, TName>
       control={control}
       name={name}
       render={({ field }) => (
@@ -21,7 +28,7 @@ export function ControlledField<TFieldValues extends FieldValues = FieldValues>(
             {...props}
             {...field}
             // TODO : Find a better way to handle this case (comparing number and string for select create issues)
-            value={field.value ? field.value.toString() : ""}
+            value={field.value ? (field.value as readonly string[] | string | number).toString() : ""}
             onValueChange={field.onChange}
           />
         </>

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

@@ -1,5 +1,5 @@
 import { useTranslate } from "@probo/i18n";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Badge, Input, IconCrossLargeX } from "@probo/ui";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { getCountryName, getCountryOptions, countries, type CountryCode } from "@probo/helpers";
@@ -35,16 +35,16 @@ type CountriesFieldInputProps = {
 
 function CountriesFieldInput(props: CountriesFieldInputProps) {
   const { __ } = useTranslate();
-  const animateBadge = useRef(false);
+  const [animateBadge, setAnimateBadge] = useState(false);
 
   const addCountry = (code: string) => {
-    animateBadge.current = true;
+    setAnimateBadge(true);
     props.onValueChange([...props.value, code]);
   };
 
   const removeCountry = (code: string) => {
-    animateBadge.current = true;
-    props.onValueChange(props.value.filter((v) => v !== code));
+    setAnimateBadge(true);
+    props.onValueChange(props.value.filter(v => v !== code));
   };
 
   return (
@@ -52,7 +52,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
       {props.value.length > 0 && (
         <div className="space-y-2">
           <div className="flex flex-wrap gap-2">
-            {props.value.map((countryCode) => (
+            {props.value.map(countryCode => (
               <Badge asChild size="md" key={countryCode}>
                 <button
                   onClick={() => removeCountry(countryCode)}
@@ -61,8 +61,8 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
                   className={clsx(
                     "hover:bg-subtle-hover cursor-pointer",
                     props.disabled && "opacity-50 cursor-not-allowed",
-                    animateBadge.current &&
-                      "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent"
+                    animateBadge
+                    && "starting:opacity-0 starting:w-0 w-max transition-all duration-500 starting:bg-accent",
                   )}
                 >
                   {getCountryName(__, countryCode as CountryCode)}
@@ -78,7 +78,7 @@ function CountriesFieldInput(props: CountriesFieldInputProps) {
       {!props.disabled && (
         <CountryInput
           availableCountries={countries.filter(
-            (c: CountryCode) => !props.value.includes(c)
+            (c: CountryCode) => !props.value.includes(c),
           )}
           onAdd={addCountry}
         />
@@ -108,7 +108,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
   const filteredCountries = countryOptions
     .filter((option: { value: string; label: string }) => availableCountries.includes(option.value as CountryCode))
     .filter((option: { value: string; label: string }) =>
-      option.label.toLowerCase().includes(search.toLowerCase())
+      option.label.toLowerCase().includes(search.toLowerCase()),
     );
 
   const handleCountryClick = (value: string) => {
@@ -123,7 +123,7 @@ function CountryInput({ availableCountries, onAdd }: CountryInputProps) {
           <Input
             type="text"
             value={search}
-            onChange={(e) => setSearch(e.target.value)}
+            onChange={e => setSearch(e.target.value)}
             onFocus={() => setIsOpen(true)}
             placeholder={__("Search and add countries...")}
             className="w-full pr-8"

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

@@ -10,7 +10,7 @@ export function DocumentClassificationOptions() {
 
   return (
     <>
-      {documentClassifications.map((classification) => (
+      {documentClassifications.map(classification => (
         <Option key={classification} value={classification}>
           {getDocumentClassificationLabel(__, classification)}
         </Option>

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

@@ -7,7 +7,7 @@ export function DocumentTypeOptions() {
 
   return (
     <>
-      {documentTypes.map((type) => (
+      {documentTypes.map(type => (
         <Option key={type} value={type}>
           {getDocumentTypeLabel(__, type)}
         </Option>

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

@@ -12,7 +12,9 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
 /**
  * A field to handle multiple emails
  */
-export function EmailsField<TFieldValues extends FieldValues = FieldValues>({ control, register }: Props<TFieldValues>) {
+export function EmailsField<
+  TFieldValues extends FieldValues = FieldValues,
+>({ control, register }: Props<TFieldValues>) {
   const { __ } = useTranslate();
   const { fields, append, remove } = useFieldArray({
     name: "additionalEmailAddresses" as ArrayPath<TFieldValues>,

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

@@ -4,7 +4,10 @@ import { useTranslate } from "@probo/i18n";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { usePaginatedMeasures } from "/hooks/graph/usePaginatedMeasures";
 
-type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type Props<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
   organizationId: string;
   control: Control<TFieldValues>;
   name: TName;
@@ -39,7 +42,7 @@ export function MeasureSelectField<TFieldValues extends FieldValues = FieldValue
 }
 
 function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
-  props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">
+  props: Pick<Props<TFieldValues>, "organizationId" | "control" | "name" | "disabled" | "optional">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, disabled, optional } = props;
@@ -49,16 +52,16 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
     return (
       data?.measures.edges
         ?.filter(
-          (edge) =>
-            edge.node.name.toLowerCase().includes(search.toLowerCase()) ||
-            edge.node.description?.toLowerCase().includes(search.toLowerCase())
+          edge =>
+            edge.node.name.toLowerCase().includes(search.toLowerCase())
+            || edge.node.description?.toLowerCase().includes(search.toLowerCase()),
         )
-        .map((edge) => edge.node) ?? []
+        .map(edge => edge.node) ?? []
     );
   }, [data?.measures.edges, search]);
 
   const allMeasures = useMemo(() => {
-    return data?.measures.edges?.map((edge) => edge.node) ?? [];
+    return data?.measures.edges?.map(edge => edge.node) ?? [];
   }, [data?.measures.edges]);
 
   return (
@@ -67,7 +70,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
         control={control}
         name={name}
         render={({ field }) => {
-          const selectedMeasure = field.value ? allMeasures?.find((m) => m.id === field.value) : null;
+          const selectedMeasure = field.value ? allMeasures?.find(m => m.id === field.value) : null;
 
           return (
             <Combobox
@@ -87,7 +90,7 @@ function MeasureSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
                   {__("None")}
                 </ComboboxItem>
               )}
-              {measures?.map((m) => (
+              {measures?.map(m => (
                 <ComboboxItem
                   key={m.id}
                   onClick={() => {

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

@@ -44,7 +44,7 @@ export function PeopleMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople">
+  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedPeople">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, selectedPeople = [] } = props;
@@ -52,7 +52,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
   const [isOpen, setIsOpen] = useState(false);
 
   const allPeople = [...people];
-  selectedPeople.forEach(selectedPerson => {
+  selectedPeople.forEach((selectedPerson) => {
     if (!allPeople.find(p => p.id === selectedPerson.id)) {
       allPeople.push({
         id: selectedPerson.id,
@@ -99,7 +99,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   open={isOpen}
                   onOpenChange={setIsOpen}
                 >
-                  {availablePeople.map((person) => (
+                  {availablePeople.map(person => (
                     <Option key={person.id} value={person.id} className="flex gap-2">
                       <Avatar
                         name={person.fullName}
@@ -120,7 +120,7 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
               {selectedPeople.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {selectedPeople.map((person) => (
+                  {selectedPeople.map(person => (
                     <Badge key={person.id} variant="neutral" className="flex items-center gap-2">
                       <Avatar
                         name={person.fullName}
@@ -153,4 +153,3 @@ function PeopleMultiSelectWithQuery<T extends FieldValues = FieldValues>(
     </>
   );
 }
-

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

@@ -4,7 +4,10 @@ import { useTranslate } from "@probo/i18n";
 import { type Control, Controller, type FieldPath, type FieldValues } from "react-hook-form";
 import { usePeople } from "/hooks/graph/PeopleGraph.ts";
 
-type Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type Props<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
   organizationId: string;
   control: Control<TFieldValues>;
   name: TName;
@@ -55,16 +58,15 @@ function PeopleSelectWithQuery<TFieldValues extends FieldValues = FieldValues>(
           id={name}
           variant="editor"
           placeholder={__("Select an owner")}
-          onValueChange={(value) =>
-            field.onChange(value === "__NONE__" ? null : value)
-          }
+          onValueChange={value =>
+            field.onChange(value === "__NONE__" ? null : value)}
           key={people?.length.toString() ?? "0"}
           {...field}
           className="w-full"
           value={field.value ?? (props.optional ? "__NONE__" : "")}
         >
           {props.optional && <Option value="__NONE__">{__("None")}</Option>}
-          {people?.map((p) => (
+          {people?.map(p => (
             <Option key={p.id} value={p.id} className="flex gap-2">
               <Avatar name={p.fullName} />
               {p.fullName}

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

@@ -21,7 +21,7 @@ export function SpecialOrCriminalDataOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -47,7 +47,7 @@ export function LawfulBasisOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -113,7 +113,7 @@ export function TransferSafeguardsOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -135,7 +135,7 @@ export function DataProtectionImpactAssessmentOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -157,7 +157,7 @@ export function TransferImpactAssessmentOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>
@@ -179,7 +179,7 @@ export function RoleOptions() {
 
   return (
     <>
-      {options.map((option) => (
+      {options.map(option => (
         <Option key={option.value} value={option.value}>
           {option.label}
         </Option>

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

@@ -7,7 +7,7 @@ export function SnapshotTypeOptions() {
 
   return (
     <>
-      {snapshotTypes.map((type) => (
+      {snapshotTypes.map(type => (
         <Option key={type} value={type}>
           {getSnapshotTypeLabel(__, type)}
         </Option>

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

@@ -1,681 +0,0 @@
-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__/core/StateOfApplicabilityControlsFieldFrameworksQuery.graphql";
-import type { StateOfApplicabilityControlsFieldFrameworkControlsQuery } from "/__generated__/core/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/VendorsMultiSelectField.tsx

@@ -45,7 +45,7 @@ export function VendorsMultiSelectField<T extends FieldValues = FieldValues>({
 }
 
 function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
-  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedVendors">
+  props: Pick<Props<T>, "organizationId" | "control" | "name" | "disabled" | "selectedVendors">,
 ) {
   const { __ } = useTranslate();
   const { name, organizationId, control, selectedVendors = [] } = props;
@@ -54,7 +54,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
   const allVendors = [...vendors];
   if (props.disabled) {
-    selectedVendors.forEach(selectedVendor => {
+    selectedVendors.forEach((selectedVendor) => {
       if (!allVendors.find(v => v.id === selectedVendor.id)) {
         allVendors.push(selectedVendor);
       }
@@ -98,7 +98,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
                   open={isOpen}
                   onOpenChange={setIsOpen}
                 >
-                  {availableVendors.map((vendor) => (
+                  {availableVendors.map(vendor => (
                     <Option key={vendor.id} value={vendor.id} className="flex gap-2">
                       <Avatar
                         name={vendor.name}
@@ -120,7 +120,7 @@ function VendorsMultiSelectWithQuery<T extends FieldValues = FieldValues>(
 
               {selectedVendors.length > 0 && (
                 <div className="flex flex-wrap gap-2">
-                  {selectedVendors.map((vendor) => (
+                  {selectedVendors.map(vendor => (
                     <Badge key={vendor.id} variant="neutral" className="flex items-center gap-2">
                       <Avatar
                         name={vendor.name}

apps/console/src/components/measures/LinkedMeasuresCard.tsx

@@ -136,7 +136,7 @@ export function LinkedMeasuresCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {measures.map((measure) => (
+          {measures.map(measure => (
             <MeasureRow
               key={measure.id}
               measure={measure}

apps/console/src/components/measures/LinkedMeasuresDialog.tsx

@@ -44,28 +44,28 @@ export function LinkedMeasureDialog({ children, ...props }: Props) {
 
 function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
   const organizationId = useOrganizationId();
-  const { data, loadNext, hasNext, isLoadingNext } =
-    usePaginatedMeasures(organizationId);
+  const { data, loadNext, hasNext, isLoadingNext }
+    = usePaginatedMeasures(organizationId);
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
-  const measures = useMemo(() => data.measures?.edges?.map((edge) => edge.node) ?? [], [data.measures]);
+  const measures = useMemo(() => data.measures?.edges?.map(edge => edge.node) ?? [], [data.measures]);
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedMeasures?.map((m) => m.id) ?? []);
+    return new Set(props.linkedMeasures?.map(m => m.id) ?? []);
   }, [props.linkedMeasures]);
 
   const filteredMeasures = useMemo(() => {
     return measures.filter(
-      (measure) =>
-        (category === null || measure.category === category) &&
-        (measure.name.toLowerCase().includes(search.toLowerCase()) ||
-          measure.description?.toLowerCase().includes(search.toLowerCase()))
+      measure =>
+        (category === null || measure.category === category)
+        && (measure.name.toLowerCase().includes(search.toLowerCase())
+          || measure.description?.toLowerCase().includes(search.toLowerCase())),
     );
   }, [measures, search, category]);
 
   const categories = useMemo(
-    () => Array.from(new Set(measures.map((m) => m.category))),
-    [measures]
+    () => Array.from(new Set(measures.map(m => m.category))),
+    [measures],
   );
 
   return (
@@ -82,7 +82,7 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
-          {categories.map((category) => (
+          {categories.map(category => (
             <Option key={category} value={category}>
               {category}
             </Option>
@@ -90,7 +90,7 @@ function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
         </Select>
       </div>
       <div className="divide-y divide-border-low">
-        {filteredMeasures.map((measure) => (
+        {filteredMeasures.map(measure => (
           <MeasureRow
             key={measure.id}
             measure={measure}
@@ -140,7 +140,9 @@ function MeasureRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

apps/console/src/components/obligations/LinkedObligationsCard.tsx

@@ -143,7 +143,7 @@ export function LinkedObligationsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {obligations.map((obligation) => (
+          {obligations.map(obligation => (
             <ObligationRow
               key={obligation.id}
               obligation={obligation}

apps/console/src/components/obligations/LinkedObligationsDialog.tsx

@@ -111,19 +111,19 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const obligations = useMemo(
-    () => data.obligations?.edges?.map((edge) => edge.node) ?? [],
+    () => data.obligations?.edges?.map(edge => edge.node) ?? [],
     [data.obligations],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedObligations?.map((o) => o.id) ?? []);
+    return new Set(props.linkedObligations?.map(o => o.id) ?? []);
   }, [props.linkedObligations]);
 
   const filteredObligations = useMemo(() => {
     return obligations.filter(
-      (obligation) =>
-        obligation.area?.toLowerCase().includes(search.toLowerCase()) ||
-        obligation.source?.toLowerCase().includes(search.toLowerCase()) ||
-        obligation.owner?.fullName
+      obligation =>
+        obligation.area?.toLowerCase().includes(search.toLowerCase())
+        || obligation.source?.toLowerCase().includes(search.toLowerCase())
+        || obligation.owner?.fullName
           ?.toLowerCase()
           .includes(search.toLowerCase()),
     );
@@ -139,7 +139,7 @@ function LinkedObligationsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredObligations.map((obligation) => (
+        {filteredObligations.map(obligation => (
           <ObligationRow
             key={obligation.id}
             obligation={obligation}

apps/console/src/components/organizations/DeleteOrganizationDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
@@ -32,14 +32,9 @@ export function DeleteOrganizationDialog({
   const handleConfirm = () => {
     if (inputValue === organizationName) {
       onConfirm();
-    }
-  };
-
-  useEffect(() => {
-    if (!isDeleting) {
       setInputValue("");
     }
-  }, [isDeleting]);
+  };
 
   return (
     <Dialog
@@ -52,7 +47,7 @@ export function DeleteOrganizationDialog({
         <p className="text-txt-secondary text-sm">
           {sprintf(
             __("This will permanently delete the organization %s and all its data."),
-            organizationName
+            organizationName,
           )}
         </p>
 
@@ -62,12 +57,12 @@ export function DeleteOrganizationDialog({
 
         <Field
           label={sprintf(
-            __('To confirm deletion, type "%s" below:'),
-            organizationName
+            __("To confirm deletion, type \"%s\" below:"),
+            organizationName,
           )}
           type="text"
           value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          onChange={e => setInputValue(e.target.value)}
           placeholder={organizationName}
           disabled={isDeleting}
           autoComplete="off"

apps/console/src/components/organizations/SlackConnection.tsx

@@ -27,7 +27,7 @@ export function SlackConnections({
   ];
 
   const slackConnections = slackConnectionDefinitions.map((def) => {
-    const connected = connectedSlackConnections.find((c) => c.id);
+    const connected = connectedSlackConnections.find(c => c.id);
     return {
       ...def,
       createdAt: connected?.createdAt,
@@ -49,7 +49,7 @@ export function SlackConnections({
 
   return (
     <div className="space-y-2">
-      {slackConnections.map((slackConnection) => (
+      {slackConnections.map(slackConnection => (
         <Card
           key={slackConnection.id}
           padded
@@ -61,37 +61,41 @@ export function SlackConnections({
           <div className="mr-auto">
             <h3 className="text-base font-semibold">{slackConnection.name}</h3>
             <p className="text-sm text-txt-tertiary">
-              {slackConnection.createdAt ? (
-                <>
-                  {sprintf(
-                    __("Connected on %s"),
-                    dateTimeFormat(slackConnection.createdAt),
-                  )}
-                  {slackConnection.channel && (
+              {slackConnection.createdAt
+                ? (
                     <>
-                      {" • "}
-                      {sprintf(__("Channel: %s"), slackConnection.channel)}
+                      {sprintf(
+                        __("Connected on %s"),
+                        dateTimeFormat(slackConnection.createdAt),
+                      )}
+                      {slackConnection.channel && (
+                        <>
+                          {" • "}
+                          {sprintf(__("Channel: %s"), slackConnection.channel)}
+                        </>
+                      )}
                     </>
+                  )
+                : (
+                    slackConnection.description
                   )}
-                </>
-              ) : (
-                slackConnection.description
-              )}
             </p>
           </div>
-          {slackConnection.createdAt ? (
-            <div>
-              <Badge variant="success" size="md">
-                {__("Connected")}
-              </Badge>
-            </div>
-          ) : (
-            canUpdate && (
-              <Button variant="secondary" asChild>
-                <a href={getUrl(slackConnection.id)}>{__("Connect")}</a>
-              </Button>
-            )
-          )}
+          {slackConnection.createdAt
+            ? (
+                <div>
+                  <Badge variant="success" size="md">
+                    {__("Connected")}
+                  </Badge>
+                </div>
+              )
+            : (
+                canUpdate && (
+                  <Button variant="secondary" asChild>
+                    <a href={getUrl(slackConnection.id)}>{__("Connect")}</a>
+                  </Button>
+                )
+              )}
         </Card>
       ))}
     </div>

apps/console/src/components/risks/LinkedRisksCard.tsx

@@ -103,7 +103,7 @@ export function LinkedRisksCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {props.risks.map((risk) => (
+          {props.risks.map(risk => (
             <RiskRow
               key={risk.id}
               risk={risk}

apps/console/src/components/risks/LinkedRisksDialog.tsx

@@ -74,24 +74,24 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
   const [search, setSearch] = useState("");
   const [category, setCategory] = useState<string | null>(null);
   const risks = useMemo(
-    () => data.organization?.risks?.edges?.map((edge) => edge.node) ?? [],
+    () => data.organization?.risks?.edges?.map(edge => edge.node) ?? [],
     [data.organization?.risks],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedRisks?.map((r) => r.id) ?? []);
+    return new Set(props.linkedRisks?.map(r => r.id) ?? []);
   }, [props.linkedRisks]);
 
   const filteredRisks = useMemo(() => {
     return risks.filter(
-      (risk) =>
-        (category === null || risk.category === category) &&
-        (risk.name.toLowerCase().includes(search.toLowerCase()) ||
-          risk.description?.toLowerCase().includes(search.toLowerCase())),
+      risk =>
+        (category === null || risk.category === category)
+        && (risk.name.toLowerCase().includes(search.toLowerCase())
+          || risk.description?.toLowerCase().includes(search.toLowerCase())),
     );
   }, [risks, search, category]);
 
   const categories = useMemo(
-    () => Array.from(new Set(risks.map((r) => r.category))),
+    () => Array.from(new Set(risks.map(r => r.category))),
     [risks],
   );
 
@@ -109,7 +109,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
           onValueChange={setCategory}
           className="max-w-[180px]"
         >
-          {categories.map((category) => (
+          {categories.map(category => (
             <Option key={category} value={category}>
               {category}
             </Option>
@@ -117,7 +117,7 @@ function LinkedRisksDialogContent(props: Omit<Props, "children">) {
         </Select>
       </div>
       <div className="divide-y divide-border-low">
-        {filteredRisks.map((risk) => (
+        {filteredRisks.map(risk => (
           <RiskRow
             key={risk.id}
             risk={risk}
@@ -167,7 +167,9 @@ function RiskRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

apps/console/src/components/snapshots/LinkedSnapshotsCard.tsx

@@ -136,7 +136,7 @@ export function LinkedSnapshotsCard<Params>(props: Props<Params>) {
               </Td>
             </Tr>
           )}
-          {snapshots.map((snapshot) => (
+          {snapshots.map(snapshot => (
             <SnapshotRow
               key={snapshot.id}
               snapshot={snapshot}

apps/console/src/components/snapshots/LinkedSnapshotsDialog.tsx

@@ -101,15 +101,15 @@ function LinkedSnapshotsDialogContent(props: Omit<Props, "children">) {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
   const snapshots = useMemo(
-    () => data.snapshots?.edges?.map((edge) => edge.node) ?? [],
+    () => data.snapshots?.edges?.map(edge => edge.node) ?? [],
     [data.snapshots],
   );
   const linkedIds = useMemo(() => {
-    return new Set(props.linkedSnapshots?.map((s) => s.id) ?? []);
+    return new Set(props.linkedSnapshots?.map(s => s.id) ?? []);
   }, [props.linkedSnapshots]);
 
   const filteredSnapshots = useMemo(() => {
-    return snapshots.filter((snapshot) =>
+    return snapshots.filter(snapshot =>
       snapshot.name.toLowerCase().includes(search.toLowerCase()),
     );
   }, [snapshots, search]);
@@ -124,7 +124,7 @@ function LinkedSnapshotsDialogContent(props: Omit<Props, "children">) {
         />
       </div>
       <div className="divide-y divide-border-low">
-        {filteredSnapshots.map((snapshot) => (
+        {filteredSnapshots.map(snapshot => (
           <SnapshotRow
             key={snapshot.id}
             snapshot={snapshot}
@@ -187,7 +187,9 @@ function SnapshotRow(props: RowProps) {
         asChild
       >
         <span>
-          <IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
+          <IconComponent size={16} />
+          {" "}
+          {isLinked ? __("Unlink") : __("Link")}
         </span>
       </Button>
     </button>

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

@@ -1,18 +1,18 @@
 import { graphql } from "relay-runtime";
 import {
-    Card,
-    IconPlusLarge,
-    Button,
-    Tr,
-    Td,
-    Table,
-    Thead,
-    Tbody,
-    Th,
-    IconChevronDown,
-    IconTrashCan,
-    TrButton,
-    Badge,
+  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__/core/LinkedStatesOfApplicabilityCardFragment.graphql";
@@ -38,257 +38,257 @@ const linkedStateOfApplicabilityFragment = graphql`
 `;
 
 type AttachMutation<Params> = (p: {
-    variables: {
-        input: {
-            stateOfApplicabilityId: string;
-            applicability: boolean;
-            justification: string | null;
-        } & Params;
-        connections: string[];
-    };
+  variables: {
+    input: {
+      stateOfApplicabilityId: string;
+      applicability: boolean;
+      justification: string | null;
+    } & Params;
+    connections: string[];
+  };
 }) => void;
 
 type DetachMutation = (p: {
-    variables: {
-        input: {
-            stateOfApplicabilityId: string;
-            controlId: string;
-        };
-        connections: string[];
+  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;
+  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 { __ } = useTranslate();
 
-    const [limit, setLimit] = useState<number | null>(
-        props.variant === "card" ? 4 : null,
-    );
+  const [limit, setLimit] = useState<number | null>(
+    props.variant === "card" ? 4 : null,
+  );
 
-    const [linkedInfo, setLinkedInfo] = useState<
-        { stateOfApplicabilityId: string; controlId: string }[]
-    >([]);
+  const [linkedInfo, setLinkedInfo] = useState<
+    { stateOfApplicabilityId: string; controlId: string }[]
+  >([]);
 
-    const statesOfApplicability = useMemo(() => {
-        return limit
-            ? props.statesOfApplicability.slice(0, limit)
-            : props.statesOfApplicability;
-    }, [props.statesOfApplicability, limit]);
+  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 showMoreButton
+    = limit !== null && props.statesOfApplicability.length > limit;
+  const variant = props.variant ?? "table";
 
-    const linkedData = linkedInfo;
+  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 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 onDetach = (stateOfApplicabilityId: string, controlId: string) => {
+    props.onDetach({
+      variables: {
+        input: {
+          stateOfApplicabilityId,
+          controlId,
+        },
+        connections: [props.connectionId],
+      },
+    });
+  };
 
-    const Wrapper = variant === "card" ? Card : "div";
+  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>
-    );
+  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;
+  fragment: LinkedStatesOfApplicabilityCardFragment$key;
+  onExtracted: (info: {
+    stateOfApplicabilityId: string;
+    controlId: string;
+  }) => void;
 }) {
-    const data = useFragment(
-        linkedStateOfApplicabilityFragment,
-        props.fragment,
-    );
+  const { fragment, onExtracted } = props;
+  const data = useFragment(
+    linkedStateOfApplicabilityFragment,
+    fragment,
+  );
 
-    useEffect(() => {
-        props.onExtracted({
-            stateOfApplicabilityId: data.stateOfApplicabilityId,
-            controlId: data.controlId,
-        });
-    }, [data.stateOfApplicabilityId, data.controlId, props.onExtracted]);
+  useEffect(() => {
+    onExtracted({
+      stateOfApplicabilityId: data.stateOfApplicabilityId,
+      controlId: data.controlId,
+    });
+  }, [data.stateOfApplicabilityId, data.controlId, onExtracted]);
 
-    return null;
+  return null;
 }
 
 function StateOfApplicabilityRow(props: {
-    stateOfApplicability: LinkedStatesOfApplicabilityCardFragment$key & {
-        id: string;
-    };
-    onClick: (stateOfApplicabilityId: string, controlId: string) => void;
-    readOnly?: boolean;
+  stateOfApplicability: LinkedStatesOfApplicabilityCardFragment$key & {
+    id: string;
+  };
+  onClick: (stateOfApplicabilityId: string, controlId: string) => void;
+  readOnly?: boolean;
 }) {
-    const soa = useFragment(
-        linkedStateOfApplicabilityFragment,
-        props.stateOfApplicability,
-    );
-    const organizationId = useOrganizationId();
-    const { __ } = useTranslate();
+  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>
-    );
+  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

@@ -1,12 +1,12 @@
 import { useTranslate } from "@probo/i18n";
 import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    Button,
-    Checkbox,
-    Textarea,
-    Badge,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Button,
+  Checkbox,
+  Textarea,
+  Badge,
 } from "@probo/ui";
 import { Suspense, useState, useRef } from "react";
 import type { ReactNode } from "react";
@@ -33,233 +33,237 @@ const query = graphql`
 `;
 
 type LinkedSOAInfo = {
-    stateOfApplicabilityId: string;
-    controlId: string;
+  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;
+  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
+  children,
+  ...props
 }: Props) {
-    const dialogRef = useRef<{ open: () => void; close: () => void }>(null);
+  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>
-    );
+  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 },
+  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 { __ } = 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 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 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 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 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,
-            );
-        }
-    };
+  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>
+  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>
-                ) : !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 (
+                    {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
-                                    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)
-                                    }
+                                  className="flex items-center gap-2"
+                                  onClick={e => e.stopPropagation()}
                                 >
-                                    <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}
+                                  <Badge variant="success">
+                                    {__("Linked")}
+                                  </Badge>
+                                  <Button
+                                    variant="danger"
+                                    onClick={() =>
+                                      handleUnlink(soa.id)}
+                                    disabled={props.disabled}
+                                  >
+                                    {__("Unlink")}
+                                  </Button>
                                 </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>
+                              )
+                            : null}
                         </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 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>
-        </>
-    );
+      </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/table/EditableTable.tsx

@@ -81,7 +81,7 @@ export function EditableTable<
         ))}
         <CellHead />
       </Row>
-      {props.items.map((item) => (
+      {props.items.map(item => (
         <EditableRow onUpdate={(k, v) => update(item.id, k, v)} key={item.id}>
           {props.row({
             item,
@@ -91,18 +91,20 @@ export function EditableTable<
           <Cell>{props.action({ item })}</Cell>
         </EditableRow>
       ))}
-      {showAdd ? (
-        <NewItemRow
-          schema={props.schema}
-          defaultValue={props.defaultValue}
-          connectionId={props.connectionId}
-          row={props.row}
-          mutation={props.createMutation}
-          onSuccess={toggleAdd}
-        />
-      ) : (
-        <RowButton onClick={toggleAdd} type="button">{props.addLabel}</RowButton>
-      )}
+      {showAdd
+        ? (
+            <NewItemRow
+              schema={props.schema}
+              defaultValue={props.defaultValue}
+              connectionId={props.connectionId}
+              row={props.row}
+              mutation={props.createMutation}
+              onSuccess={toggleAdd}
+            />
+          )
+        : (
+            <RowButton onClick={toggleAdd} type="button">{props.addLabel}</RowButton>
+          )}
     </SortableDataTable>
   );
 }
@@ -144,7 +146,7 @@ function NewItemRow<T extends { id: string }, S extends z.ZodSchema>(props: {
           disabled={!isOk || isMutating}
           variant="tertiary"
           className={clsx(isOk ? "text-txt-success" : "text-txt-secondary")}
-          onClick={onSubmit}
+          onClick={() => void onSubmit()}
         >
           {isMutating ? <Spinner size={16} /> : <IconCheckmark1 size={16} />}
         </Button>

apps/console/src/components/table/GraphQLCell.tsx

@@ -79,7 +79,8 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
             value={value}
             itemRenderer={props.itemRenderer}
           />
-        </div>{" "}
+        </div>
+        {" "}
         {props.multiple && (
           <Command.Input
             className={classNames.input()}
@@ -88,11 +89,11 @@ export function GraphQLCell<Q extends OperationType, T extends NonNullable<unkno
         )}
         <Command.List>
           <Suspense
-            fallback={
+            fallback={(
               <div className="py-2 px-3 flex items-center justify-center">
                 <Spinner />
               </div>
-            }
+            )}
           >
             <ItemList
               {...props}
@@ -121,8 +122,8 @@ function ItemList<Q extends OperationType, T>(
   return (
     <>
       {items
-        .filter((item) => !props.usedKeys.has(getKey(item) ?? ""))
-        .map((item) => (
+        .filter(item => !props.usedKeys.has(getKey(item) ?? ""))
+        .map(item => (
           <Command.Item
             key={getKey(item)}
             className={props.className}

apps/console/src/components/table/PeopleCell.tsx

@@ -18,9 +18,8 @@ export function PeopleCell(props: Props) {
         organizationId: props.organizationId,
         filter: { excludeContractEnded: true },
       }}
-      items={(data) =>
-        data.organization?.peoples?.edges.map((edge) => edge.node) ?? []
-      }
+      items={data =>
+        data.organization?.peoples?.edges.map(edge => edge.node) ?? []}
       itemRenderer={({ item }) => (
         <div className="flex gap-2 whitespace-nowrap items-center text-xs">
           <Avatar name={item.fullName} />

apps/console/src/components/table/VendorsCell.tsx

@@ -26,9 +26,8 @@ export function VendorsCell(props: Props) {
       variables={{
         organizationId: props.organizationId,
       }}
-      items={(data) =>
-        data.organization?.vendors?.edges?.map((edge) => edge.node) ?? []
-      }
+      items={data =>
+        data.organization?.vendors?.edges?.map(edge => edge.node) ?? []}
       itemRenderer={({ item, onRemove }) => (
         <VendorBadge vendor={item} onRemove={onRemove} />
       )}

apps/console/src/components/tasks/TaskFormDialog.tsx

@@ -75,7 +75,7 @@ const createTaskSchema = z.object({
   timeEstimate: z.string().optional().nullable(),
   assignedToId: z.string().optional().nullable(),
   measureId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   deadline: z.string().optional().nullable(),
@@ -86,11 +86,11 @@ const updateTaskSchema = z.object({
   description: z.string().optional().nullable(),
   timeEstimate: z.string().optional().nullable(),
   assignedToId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   measureId: z.preprocess(
-    (val) => (val === "" || val == null ? null : val),
+    val => (val === "" || val == null ? null : val),
     z.string().nullable().optional(),
   ),
   deadline: z.string().optional().nullable(),
@@ -105,11 +105,12 @@ type Props = {
 };
 
 export default function TaskFormDialog(props: Props) {
+  const { children, connection, ref, task: taskKey, measureId } = props;
   const { __ } = useTranslate();
-  const ref = useDialogRef();
-  const dialogRef = props.ref ?? ref;
+  const newRef = useDialogRef();
+  const dialogRef = ref ?? newRef;
   const organizationId = useOrganizationId();
-  const task = useFragment(taskFragment, props.task);
+  const task = useFragment(taskFragment, taskKey);
   const relayEnv = useRelayEnvironment();
   const [mutate] = useMutationWithToasts(
     task ? taskUpdateMutation : taskCreateMutation,
@@ -121,19 +122,19 @@ export default function TaskFormDialog(props: Props) {
 
   const isUpdating = !!task;
 
-  const { control, handleSubmit, register, formState, reset } =
-    useFormWithSchema(isUpdating ? updateTaskSchema : createTaskSchema, {
+  const { control, handleSubmit, register, formState, reset }
+    = useFormWithSchema(isUpdating ? updateTaskSchema : createTaskSchema, {
       defaultValues: {
         name: task?.name ?? "",
         description: task?.description ?? "",
         timeEstimate: task?.timeEstimate ?? "",
         assignedToId: task?.assignedTo?.id ?? "",
-        measureId: task?.measure?.id ?? props.measureId ?? "",
+        measureId: task?.measure?.id ?? measureId ?? "",
         deadline: task?.deadline?.split("T")[0] ?? "",
       },
     });
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = async (data: z.infer<typeof updateTaskSchema | typeof createTaskSchema>) => {
     if (task) {
       await mutate({
         variables: {
@@ -160,7 +161,7 @@ export default function TaskFormDialog(props: Props) {
             assignedToId: data.assignedToId || null,
             measureId: data.measureId || null,
           },
-          connections: [props.connection!],
+          connections: [connection!],
         },
         onCompleted: (_response, errors) => {
           if (!errors && data.measureId) {
@@ -171,20 +172,20 @@ export default function TaskFormDialog(props: Props) {
       reset();
     }
     dialogRef.current?.close();
-  });
-  const showMeasure = !props.measureId;
+  };
+  const showMeasure = !measureId;
 
   return (
     <Dialog
       ref={dialogRef}
-      trigger={props.children}
-      title={
+      trigger={children}
+      title={(
         <Breadcrumb
           items={[__("Tasks"), isUpdating ? __("Edit Task") : __("New Task")]}
         />
-      }
+      )}
     >
-      <form onSubmit={onSubmit}>
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
         <DialogContent className="grid grid-cols-[1fr_420px]">
           <div className="py-8 px-10 space-y-4">
             <Input
@@ -240,7 +241,7 @@ export default function TaskFormDialog(props: Props) {
                   <DurationPicker
                     {...field}
                     value={value ?? null}
-                    onValueChange={(value) => onChange(value)}
+                    onValueChange={value => onChange(value)}
                   />
                 )}
               />

apps/console/src/components/tasks/TasksCard.tsx

@@ -39,9 +39,9 @@ type Props = {
   tasks:
     | TasksPageFragment$data["tasks"]["edges"]
     | Extract<
-        MeasureTasksTabQuery$data["node"],
-        { __typename: "Measure" }
-      >["tasks"]["edges"];
+      MeasureTasksTabQuery$data["node"],
+      { __typename: "Measure" }
+    >["tasks"]["edges"];
   connectionId: string;
 };
 
@@ -67,52 +67,54 @@ export function TasksCard({ tasks, connectionId }: Props) {
 
   return (
     <div className="space-y-6">
-      {tasks.length === 0 ? (
-        <p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
-      ) : (
-        <Card>
-          <Tabs className="px-6">
-            {hashes.map((h) => (
-              <TabItem asChild active={hash === h.hash} key={h.hash}>
-                <Link to={`#${h.hash}`}>
-                  {h.label}
-                  <TabBadge>{tasksPerHash.get(h.hash)?.length}</TabBadge>
-                </Link>
-              </TabItem>
-            ))}
-          </Tabs>
-          <div className="divide-y divide-border-solid">
-            {hash === "all"
-              ? // All tabs group the todo using the state
-                hashes
-                  .slice(0, 2)
-                  .filter((h) => tasksPerHash.get(h.hash)?.length)
-                  .map((h) => (
-                    <Fragment key={h.label}>
-                      <h2 className="px-6 py-3 text-sm font-medium flex items-center gap-2 bg-subtle">
-                        <TaskStateIcon state={h.state!} />
-                        {h.label}
-                      </h2>
-                      {tasksPerHash.get(h.hash)?.map(({ node: task }) => (
-                        <TaskRow
-                          key={task.id}
-                          fKey={task}
-                          connectionId={connectionId}
-                        />
-                      ))}
-                    </Fragment>
-                  ))
-              : // Todo and Done tab simply list todos
-                filteredTasks?.map(({ node: task }) => (
-                  <TaskRow
-                    key={task.id}
-                    fKey={task}
-                    connectionId={connectionId}
-                  />
+      {tasks.length === 0
+        ? (
+            <p className="text-center py-6 text-txt-secondary">{__("No tasks")}</p>
+          )
+        : (
+            <Card>
+              <Tabs className="px-6">
+                {hashes.map(h => (
+                  <TabItem asChild active={hash === h.hash} key={h.hash}>
+                    <Link to={`#${h.hash}`}>
+                      {h.label}
+                      <TabBadge>{tasksPerHash.get(h.hash)?.length}</TabBadge>
+                    </Link>
+                  </TabItem>
                 ))}
-          </div>
-        </Card>
-      )}
+              </Tabs>
+              <div className="divide-y divide-border-solid">
+                {hash === "all"
+                  // All tabs group the todo using the state
+                  ? hashes
+                      .slice(0, 2)
+                      .filter(h => tasksPerHash.get(h.hash)?.length)
+                      .map(h => (
+                        <Fragment key={h.label}>
+                          <h2 className="px-6 py-3 text-sm font-medium flex items-center gap-2 bg-subtle">
+                            <TaskStateIcon state={h.state!} />
+                            {h.label}
+                          </h2>
+                          {tasksPerHash.get(h.hash)?.map(({ node: task }) => (
+                            <TaskRow
+                              key={task.id}
+                              fKey={task}
+                              connectionId={connectionId}
+                            />
+                          ))}
+                        </Fragment>
+                      ))
+                  // Todo and Done tab simply list todos
+                  : filteredTasks?.map(({ node: task }) => (
+                      <TaskRow
+                        key={task.id}
+                        fKey={task}
+                        connectionId={connectionId}
+                      />
+                    ))}
+              </div>
+            </Card>
+          )}
     </div>
   );
 }
@@ -163,15 +165,15 @@ function TaskRow(props: TaskRowProps) {
   const params = useParams<{ measureId?: string }>();
 
   const relayEnv = useRelayEnvironment();
-  const { canUpdate, canDelete, ...task } =
-    useFragment<TasksCard_TaskRowFragment$key>(
+  const { canUpdate, canDelete, ...task }
+    = useFragment<TasksCard_TaskRowFragment$key>(
       fragment,
       props.fKey as TasksCard_TaskRowFragment$key,
     );
   const [updateTask, isUpdating] = useMutation(taskUpdateMutation);
 
-  const onToggle = () => {
-    promisifyMutation(updateTask)({
+  const onToggle = async () => {
+    await promisifyMutation(updateTask)({
       variables: {
         input: {
           taskId: task.id,
@@ -217,7 +219,7 @@ function TaskRow(props: TaskRowProps) {
           <div className="flex items-center gap-2 pt-[2px]">
             <PriorityLevel level={1} />
             <button
-              onClick={onToggle}
+              onClick={() => void onToggle()}
               className="cursor-pointer -m-1 p-1 disabled:opacity-60"
               disabled={isUpdating}
             >
@@ -227,7 +229,7 @@ function TaskRow(props: TaskRowProps) {
           <div className="text-sm space-y-1 flex-1">
             <h2 className="font-medium">{task.name}</h2>
             {task.description && (
-              <p className="text-txt-secondary whitespace-pre-wrap break-words">
+              <p className="text-txt-secondary whitespace-pre-wrap wrap-break-word">
                 {task.description}
               </p>
             )}

apps/console/src/components/trustCenter/DeleteTrustCenterReferenceDialog.tsx

@@ -60,7 +60,7 @@ export function DeleteTrustCenterReferenceDialog({
         <p className="text-txt-secondary">
           {sprintf(
             __("Are you sure you want to delete the reference \"%s\"?"),
-            referenceName
+            referenceName,
           )}
         </p>
         <p className="text-txt-secondary mt-2">
@@ -71,7 +71,7 @@ export function DeleteTrustCenterReferenceDialog({
       <DialogFooter>
         <Button
           variant="danger"
-          onClick={handleDelete}
+          onClick={() => void handleDelete()}
           disabled={isDeleting}
           icon={isDeleting ? Spinner : IconTrashCan}
         >

apps/console/src/components/trustCenter/TrustCenterAuditsCard.tsx

@@ -14,7 +14,7 @@ import {
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import {
   sprintf,
   getAuditStateVariant,
@@ -47,7 +47,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   audits: TrustCenterAuditsCardFragment$key[];
@@ -65,11 +65,11 @@ export function TrustCenterAuditsCard<Params>(props: Props<Params>) {
   }, [props.audits, limit]);
   const showMoreButton = limit !== null && props.audits.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     auditId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: auditId,
@@ -130,7 +130,7 @@ function AuditRow(props: {
   onChangeVisibility: (
     auditId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
@@ -138,26 +138,16 @@ function AuditRow(props: {
   const audit = useFragment(trustCenterAuditFragment, auditFragmentRef);
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(audit.id, typedValue);
+      await onChangeVisibility(audit.id, typedValue);
     },
     [audit.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && audit.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [audit.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || audit.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   const validUntilFormatted = audit.validUntil
@@ -179,12 +169,12 @@ function AuditRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={audit.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>

apps/console/src/components/trustCenter/TrustCenterDocumentsCard.tsx

@@ -17,7 +17,7 @@ import {
 import { useTranslate } from "@probo/i18n";
 import type { TrustCenterDocumentsCardFragment$key } from "/__generated__/core/TrustCenterDocumentsCardFragment.graphql";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 
@@ -46,7 +46,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   documents: TrustCenterDocumentsCardFragment$key[];
@@ -64,11 +64,11 @@ export function TrustCenterDocumentsCard<Params>(props: Props<Params>) {
   }, [props.documents, limit]);
   const showMoreButton = limit !== null && props.documents.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     documentId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: documentId,
@@ -128,38 +128,28 @@ function DocumentRow(props: {
   onChangeVisibility: (
     documentId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
-  const { documentFragmentRef, onChangeVisibility, disabled, canUpdate } =
-    props;
+  const { documentFragmentRef, onChangeVisibility, disabled, canUpdate }
+    = props;
   const document = useFragment(
     trustCenterDocumentFragment,
     documentFragmentRef,
   );
   const organizationId = useOrganizationId();
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(document.id, typedValue);
+      await onChangeVisibility(document.id, typedValue);
     },
     [document.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && document.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [document.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || document.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   return (
@@ -178,12 +168,12 @@ function DocumentRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={document.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>

apps/console/src/components/trustCenter/TrustCenterFilesCard.tsx

@@ -21,7 +21,7 @@ import type {
   TrustCenterFilesCardFragment$data,
 } from "/__generated__/core/TrustCenterFilesCardFragment.graphql";
 import { useFragment } from "react-relay";
-import { useMemo, useState, useCallback, useEffect } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { sprintf, getTrustCenterVisibilityOptions } from "@probo/helpers";
 import { formatDate } from "@probo/helpers";
 
@@ -46,7 +46,7 @@ type Mutation<Params> = (p: {
       trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC";
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   files: TrustCenterFilesCardFragment$key[];
@@ -66,11 +66,11 @@ export function TrustCenterFilesCard<Params>(props: Props<Params>) {
   }, [props.files, limit]);
   const showMoreButton = limit !== null && props.files.length > limit;
 
-  const onChangeVisibility = (
+  const onChangeVisibility = async (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
   ) => {
-    props.onChangeVisibility({
+    await props.onChangeVisibility({
       variables: {
         input: {
           id: fileId,
@@ -133,7 +133,7 @@ function FileRowWrapper(props: {
   onChangeVisibility: (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   onEdit: (file: { id: string; name: string; category: string }) => void;
   onDelete: (id: string) => void;
   disabled?: boolean;
@@ -157,35 +157,25 @@ function FileRow(props: {
   onChangeVisibility: (
     fileId: string,
     trustCenterVisibility: "NONE" | "PRIVATE" | "PUBLIC",
-  ) => void;
+  ) => Promise<void>;
   onEdit: (file: { id: string; name: string; category: string }) => void;
   onDelete: (id: string) => void;
   disabled?: boolean;
   canUpdate: boolean;
 }) {
-  const { file, onChangeVisibility, onEdit, onDelete, disabled, canUpdate } =
-    props;
+  const { file, onChangeVisibility, onEdit, onDelete, disabled, canUpdate }
+    = props;
   const { __ } = useTranslate();
-  const [optimisticValue, setOptimisticValue] = useState<string | null>(null);
 
   const handleValueChange = useCallback(
-    (value: string) => {
+    async (value: string) => {
       const stringValue = typeof value === "string" ? value : "";
       const typedValue = stringValue as "NONE" | "PRIVATE" | "PUBLIC";
-      setOptimisticValue(typedValue);
-      onChangeVisibility(file.id, typedValue);
+      await onChangeVisibility(file.id, typedValue);
     },
     [file.id, onChangeVisibility],
   );
 
-  useEffect(() => {
-    if (optimisticValue && file.trustCenterVisibility === optimisticValue) {
-      setOptimisticValue(null);
-    }
-  }, [file.trustCenterVisibility, optimisticValue]);
-
-  const currentValue = optimisticValue || file.trustCenterVisibility;
-
   const visibilityOptions = getTrustCenterVisibilityOptions(__);
 
   return (
@@ -198,12 +188,12 @@ function FileRow(props: {
       <Td noLink width={130} className="pr-0">
         <Field
           type="select"
-          value={currentValue}
-          onValueChange={handleValueChange}
+          value={file.trustCenterVisibility}
+          onValueChange={value => void handleValueChange(value)}
           disabled={disabled || !canUpdate}
           className="w-[105px]"
         >
-          {visibilityOptions.map((option) => (
+          {visibilityOptions.map(option => (
             <Option key={option.value} value={option.value}>
               <div className="flex items-center justify-between w-full">
                 <Badge variant={option.variant}>{option.label}</Badge>
@@ -218,8 +208,7 @@ function FileRow(props: {
             variant="secondary"
             icon={IconArrowLink}
             onClick={() =>
-              window.open(file.fileUrl, "_blank", "noopener,noreferrer")
-            }
+              window.open(file.fileUrl, "_blank", "noopener,noreferrer")}
             title={__("Download")}
           />
           {file.canUpdate && (
@@ -231,8 +220,7 @@ function FileRow(props: {
                   id: file.id,
                   name: file.name,
                   category: file.category,
-                })
-              }
+                })}
               disabled={disabled}
               title={__("Edit")}
             />

apps/console/src/components/trustCenter/TrustCenterReferenceDialog.tsx

@@ -15,7 +15,7 @@ import { z } from "zod";
 import { useFormWithSchema } from "/hooks/useFormWithSchema";
 import {
   useCreateTrustCenterReferenceMutation,
-  useUpdateTrustCenterReferenceMutation
+  useUpdateTrustCenterReferenceMutation,
 } from "/hooks/graph/TrustCenterReferenceGraph";
 
 const referenceSchema = z.object({
@@ -44,7 +44,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
   function TrustCenterReferenceDialog({ children }, ref) {
     const { __ } = useTranslate();
     const dialogRef = useDialogRef();
-    const [mode, setMode] = useState<'create' | 'edit'>('create');
+    const [mode, setMode] = useState<"create" | "edit">("create");
     const [trustCenterId, setTrustCenterId] = useState<string>("");
     const [connectionId, setConnectionId] = useState<string>("");
     const [editReference, setEditReference] = useState<Reference | null>(null);
@@ -61,12 +61,12 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           description: "",
           websiteUrl: "",
         },
-      }
+      },
     );
 
     useImperativeHandle(ref, () => ({
       openCreate: (tId: string, cId: string) => {
-        setMode('create');
+        setMode("create");
         setTrustCenterId(tId);
         setConnectionId(cId);
         setEditReference(null);
@@ -79,7 +79,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
         dialogRef.current?.open();
       },
       openEdit: (reference: Reference) => {
-        setMode('edit');
+        setMode("edit");
         setEditReference(reference);
         setUploadedFile(null);
         reset({
@@ -99,8 +99,8 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
       }
     };
 
-    const onSubmit = handleSubmit(async (data: ReferenceFormData) => {
-      if (mode === 'create') {
+    const onSubmit = async (data: ReferenceFormData) => {
+      if (mode === "create") {
         if (!uploadedFile) {
           return;
         }
@@ -161,7 +161,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           },
         });
       }
-    });
+    };
 
     const handleClose = () => {
       reset();
@@ -169,12 +169,12 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
     };
 
     const isSubmitting = isCreating || isUpdating;
-    const title = mode === 'create' ? __("Add Reference") : __("Edit Reference");
+    const title = mode === "create" ? __("Add Reference") : __("Edit Reference");
 
     return (
       <>
         {children && (
-          <span onClick={() => mode === 'create' && dialogRef.current?.open()}>
+          <span onClick={() => mode === "create" && dialogRef.current?.open()}>
             {children}
           </span>
         )}
@@ -185,7 +185,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
           className="max-w-2xl"
           onClose={handleClose}
         >
-          <form onSubmit={onSubmit}>
+          <form onSubmit={e => void handleSubmit(onSubmit)(e)}>
             <DialogContent padded className="space-y-6">
               <Field
                 {...register("name")}
@@ -213,7 +213,7 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
                 placeholder={__("https://example.com")}
               />
 
-              {mode === 'edit' && (
+              {mode === "edit" && (
                 <Field
                   {...register("rank", { valueAsNumber: true })}
                   label={__("Rank")}
@@ -239,18 +239,21 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
                 />
                 {uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
-                    <p className="text-sm font-medium">{__("Selected file")}:</p>
+                    <p className="text-sm font-medium">
+                      {__("Selected file")}
+                      :
+                    </p>
                     <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
                   </div>
                 )}
-                {mode === 'edit' && !uploadedFile && (
+                {mode === "edit" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-tertiary-subtle rounded-lg">
                     <p className="text-sm text-txt-secondary">
                       {__("Current logo will be kept if no new file is uploaded")}
                     </p>
                   </div>
                 )}
-                {mode === 'create' && !uploadedFile && (
+                {mode === "create" && !uploadedFile && (
                   <div className="mt-2 p-3 bg-warning-subtle rounded-lg">
                     <p className="text-sm">
                       {__("Logo is required for new references")}
@@ -263,15 +266,15 @@ export const TrustCenterReferenceDialog = forwardRef<TrustCenterReferenceDialogR
             <DialogFooter>
               <Button
                 type="submit"
-                disabled={isSubmitting || (mode === 'create' && !uploadedFile)}
+                disabled={isSubmitting || (mode === "create" && !uploadedFile)}
                 icon={isSubmitting ? Spinner : undefined}
               >
-                {mode === 'create' ? __("Add Reference") : __("Update Reference")}
+                {mode === "create" ? __("Add Reference") : __("Update Reference")}
               </Button>
             </DialogFooter>
           </form>
         </Dialog>
       </>
     );
-  }
+  },
 );

apps/console/src/components/trustCenter/TrustCenterReferencesSection.tsx

@@ -49,8 +49,8 @@ export function TrustCenterReferencesSection({
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
   const [refetchKey, setRefetchKey] = useState(0);
-  const { node: trustCenterNode } =
-    useLazyLoadQuery<TrustCenterReferenceGraphQuery>(
+  const { node: trustCenterNode }
+    = useLazyLoadQuery<TrustCenterReferenceGraphQuery>(
       trustCenterReferencesQuery,
       { trustCenterId: trustCenterId || "" },
       { fetchPolicy: "network-only", fetchKey: refetchKey },
@@ -60,8 +60,8 @@ export function TrustCenterReferencesSection({
   }
   const [updateRank] = useUpdateTrustCenterReferenceRankMutation();
 
-  const references =
-    trustCenterNode?.references?.edges?.map((edge) => edge.node) || [];
+  const references
+    = trustCenterNode?.references?.edges?.map(edge => edge.node) || [];
   const referencesConnectionId = trustCenterNode?.references?.__id || "";
 
   const handleCreate = () => {
@@ -89,7 +89,7 @@ export function TrustCenterReferencesSection({
     }
   };
 
-  const handleDrop = (targetIndex: number) => {
+  const handleDrop = async (targetIndex: number) => {
     if (draggedIndex === null || draggedIndex === targetIndex) {
       setDraggedIndex(null);
       setDragOverIndex(null);
@@ -99,7 +99,7 @@ export function TrustCenterReferencesSection({
     const draggedRef = references[draggedIndex];
     const targetRank = references[targetIndex].rank;
 
-    updateRank({
+    await updateRank({
       variables: {
         input: {
           id: draggedRef.id,
@@ -107,7 +107,7 @@ export function TrustCenterReferencesSection({
         },
       },
       onCompleted: () => {
-        setRefetchKey((prev) => prev + 1);
+        setRefetchKey(prev => prev + 1);
       },
     });
 
@@ -158,8 +158,8 @@ export function TrustCenterReferencesSection({
               connectionId={referencesConnectionId}
               onVisitWebsite={() => handleVisitWebsite(reference.websiteUrl)}
               onDragStart={() => handleDragStart(index)}
-              onDragOver={(e) => handleDragOver(e, index)}
-              onDrop={() => handleDrop(index)}
+              onDragOver={e => handleDragOver(e, index)}
+              onDrop={() => void handleDrop(index)}
             />
           ))}
         </Tbody>

apps/console/src/components/trustCenter/TrustCenterVendorsCard.tsx

@@ -38,7 +38,7 @@ type Mutation<Params> = (p: {
       showOnTrustCenter: boolean;
     } & Params;
   };
-}) => void;
+}) => Promise<void>;
 
 type Props<Params> = {
   vendors: TrustCenterVendorsCardFragment$key[];
@@ -55,8 +55,8 @@ export function TrustCenterVendorsCard<Params>(props: Props<Params>) {
   }, [props.vendors, limit]);
   const showMoreButton = limit !== null && props.vendors.length > limit;
 
-  const onToggleVisibility = (vendorId: string, showOnTrustCenter: boolean) => {
-    props.onToggleVisibility({
+  const onToggleVisibility = async (vendorId: string, showOnTrustCenter: boolean) => {
+    await props.onToggleVisibility({
       variables: {
         input: {
           id: vendorId,
@@ -112,7 +112,7 @@ export function TrustCenterVendorsCard<Params>(props: Props<Params>) {
 
 function VendorRow(props: {
   vendor: TrustCenterVendorsCardFragment$key;
-  onToggleVisibility: (vendorId: string, showOnTrustCenter: boolean) => void;
+  onToggleVisibility: (vendorId: string, showOnTrustCenter: boolean) => Promise<void>;
   disabled?: boolean;
 }) {
   const vendor = useFragment(trustCenterVendorFragment, props.vendor);
@@ -137,8 +137,7 @@ function VendorRow(props: {
           <Button
             variant="secondary"
             onClick={() =>
-              props.onToggleVisibility(vendor.id, !vendor.showOnTrustCenter)
-            }
+              void props.onToggleVisibility(vendor.id, !vendor.showOnTrustCenter)}
             icon={vendor.showOnTrustCenter ? IconCrossLargeX : IconCheckmark1}
             disabled={props.disabled}
           >

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

@@ -150,7 +150,7 @@ export const useDeleteAsset = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           asset.name,
         ),

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

@@ -135,7 +135,7 @@ export const useDeleteAudit = (
         await mutate({
           variables: {
             input: {
-              auditId: audit.id!,
+              auditId: audit.id,
             },
             connections: [connectionId],
           },

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

@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const ContinualImprovementsConnectionKey =
-  "ContinualImprovementsPage_continualImprovements";
+export const ContinualImprovementsConnectionKey
+  = "ContinualImprovementsPage_continualImprovements";
 
 export const continualImprovementsQuery = graphql`
   query ContinualImprovementGraphListQuery(

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

@@ -144,7 +144,7 @@ export const useDeleteDatum = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           datum.name,
         ),

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

@@ -59,7 +59,7 @@ export const useDeleteFrameworkMutation = (
           return commitDelete({
             variables: {
               input: {
-                frameworkId: framework.id!,
+                frameworkId: framework.id,
               },
               connections: [connectionId],
             },
@@ -69,7 +69,7 @@ export const useDeleteFrameworkMutation = (
         {
           message: sprintf(
             __(
-              'This will permanently delete framework "%s". This action cannot be undone.',
+              "This will permanently delete framework \"%s\". This action cannot be undone.",
             ),
             framework.name,
           ),

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

@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const NonconformitiesConnectionKey =
-  "NonconformitiesPage_nonconformities";
+export const NonconformitiesConnectionKey
+  = "NonconformitiesPage_nonconformities";
 
 export const nonconformitiesQuery = graphql`
   query NonconformityGraphListQuery($organizationId: ID!, $snapshotId: ID) {

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

@@ -58,7 +58,7 @@ export function usePeople(
     { fetchPolicy: "network-only" },
   );
   return useMemo(() => {
-    return data.organization?.peoples?.edges.map((edge) => edge.node) ?? [];
+    return data.organization?.peoples?.edges.map(edge => edge.node) ?? [];
   }, [data]);
 }
 
@@ -123,7 +123,7 @@ export function usePeopleQuery(
     paginatedPeopleFragment,
     data.organization as PeopleGraphPaginatedFragment$key,
   );
-  const people = pagination.data.peoples?.edges.map((edge) => edge.node);
+  const people = pagination.data.peoples?.edges.map(edge => edge.node);
   return {
     ...pagination,
     people,
@@ -179,7 +179,7 @@ export const useDeletePeople = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           people.fullName,
         ),

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

@@ -5,8 +5,8 @@ import { useTranslate } from "@probo/i18n";
 import { promisifyMutation, sprintf } from "@probo/helpers";
 import { useMutationWithToasts } from "../useMutationWithToasts";
 
-export const ProcessingActivitiesConnectionKey =
-  "ProcessingActivitiesPage_processingActivities";
+export const ProcessingActivitiesConnectionKey
+  = "ProcessingActivitiesPage_processingActivities";
 export type ProcessingActivityDPIAResidualRisk = "LOW" | "MEDIUM" | "HIGH";
 
 export const processingActivitiesQuery = graphql`

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

@@ -97,7 +97,7 @@ export function useRisksQuery(queryRef: PreloadedQuery<RiskGraphListQuery>) {
     risksFragment,
     data.organization as RiskGraphFragment$key,
   );
-  const risks = pagination.data?.risks?.edges.map((edge) => edge.node);
+  const risks = pagination.data?.risks?.edges.map(edge => edge.node);
 
   return {
     ...pagination,

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

@@ -81,7 +81,7 @@ export function useStateOfApplicabilityQuery(
     paginatedStateOfApplicabilityFragment,
     data.organization as StateOfApplicabilityGraphPaginatedFragment$key,
   );
-  const statesOfApplicability = pagination.data.statesOfApplicability?.edges.map((edge) => edge.node);
+  const statesOfApplicability = pagination.data.statesOfApplicability?.edges.map(edge => edge.node);
   return {
     ...pagination,
     statesOfApplicability,
@@ -142,7 +142,7 @@ export const useDeleteStateOfApplicability = (
       {
         message: sprintf(
           __(
-            'This will permanently delete "%s". This action cannot be undone.',
+            "This will permanently delete \"%s\". This action cannot be undone.",
           ),
           stateOfApplicability.name,
         ),

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

@@ -1,4 +1,4 @@
-import { graphql } from 'react-relay';
+import { graphql } from "react-relay";
 
 export const trustCenterByIdQuery = graphql`
   query TrustCenterAccessTokenGraphQuery($trustCenterId: ID!) {

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

@@ -28,7 +28,7 @@ export function useCreateTrustCenterFileMutation() {
     {
       successMessage: "File uploaded successfully",
       errorMessage: "Failed to upload file",
-    }
+    },
   );
 }
 
@@ -52,7 +52,7 @@ export function useUpdateTrustCenterFileMutation() {
     {
       successMessage: "File updated successfully",
       errorMessage: "Failed to update file",
-    }
+    },
   );
 }
 
@@ -73,6 +73,6 @@ export function useDeleteTrustCenterFileMutation() {
     {
       successMessage: "File deleted successfully",
       errorMessage: "Failed to delete file",
-    }
+    },
   );
 }

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

@@ -79,7 +79,7 @@ export const useDeleteVendor = (
       {
         message: sprintf(
           __(
-            'This will permanently delete vendor "%s". This action cannot be undone.',
+            "This will permanently delete vendor \"%s\". This action cannot be undone.",
           ),
           vendor.name,
         ),
@@ -218,6 +218,6 @@ export function useVendors(organizationId: string) {
     { fetchPolicy: "network-only" },
   );
   return useMemo(() => {
-    return data.organization?.vendors?.edges.map((edge) => edge.node) ?? [];
+    return data.organization?.vendors?.edges.map(edge => edge.node) ?? [];
   }, [data]);
 }

apps/console/src/hooks/useFetchQuery.ts

@@ -5,11 +5,11 @@ import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
  */
 export function useFetchQuery<T>(
   url: string,
-  options?: Omit<UseQueryOptions<T>, "queryKey" | "queryFn">
+  options?: Omit<UseQueryOptions<T>, "queryKey" | "queryFn">,
 ) {
   return useQuery<T>({
     ...options,
     queryKey: [url],
-    queryFn: () => fetch(url).then((res) => res.json()),
+    queryFn: () => fetch(url).then(res => res.json()),
   });
 }

apps/console/src/hooks/useMutateField.tsx

@@ -15,7 +15,7 @@ export function useMutateField<Input extends Record<string, unknown>>(
   const [mutate, isUpdating] = useMutation(mutation);
 
   return {
-    update<T extends keyof Input>(id: string, fieldName: T, value: Input[T]) {
+    update: <T extends keyof Input>(id: string, fieldName: T, value: Input[T]) => {
       if (!id) {
         return;
       }

apps/console/src/hooks/useMutationWithToasts.ts

@@ -13,7 +13,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
   baseOptions?: {
     successMessage?: string | ((response: T["response"]) => string);
     errorMessage?: string;
-  }
+  },
 ) {
   const [mutate, isLoading] = useMutation<T>(query);
   const { toast } = useToast();
@@ -24,7 +24,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
         onSuccess?: () => void;
         successMessage?: string | ((response: T["response"]) => string);
         errorMessage?: string;
-      }
+      },
     ) => {
       const options = { ...baseOptions, ...queryOptions };
       return new Promise<void>((resolve, reject) =>
@@ -39,7 +39,7 @@ export function useMutationWithToasts<T extends MutationParameters>(
                 description: formatError(errorTitle, error as GraphQLError[]),
                 variant: "error",
               });
-              reject(error);
+              reject(new Error(errorTitle));
               return;
             }
             const successMessage = typeof options.successMessage === "function"
@@ -49,8 +49,8 @@ export function useMutationWithToasts<T extends MutationParameters>(
             toast({
               title: __("Success"),
               description:
-                successMessage ??
-                __("Operation completed successfully"),
+                successMessage
+                ?? __("Operation completed successfully"),
               variant: "success",
             });
             options.onSuccess?.();
@@ -65,10 +65,10 @@ export function useMutationWithToasts<T extends MutationParameters>(
             });
             reject(error);
           },
-        })
+        }),
       );
     },
-    [mutate, toast, __, baseOptions]
+    [mutate, toast, __, baseOptions],
   );
 
   return [mutateWithToast, isLoading] as const;

apps/console/src/hooks/useStateWithSchema.ts

@@ -9,13 +9,13 @@ export function useStateWithSchema<T extends ZodTypeAny>(
   const [value, errors] = useMemo((): [z.infer<T>, Record<string, string>] => {
     try {
       schema.parse(state);
-      return [schema.parse(state), {}];
+      return [schema.parse(state) as z.TypeOf<T>, {}];
     } catch (error) {
       if (error instanceof ZodError) {
         return [
           state,
           Object.fromEntries(
-            error.issues.map((issue) => [
+            error.issues.map(issue => [
               issue.path.join("."),
               issue.message,
             ]) ?? [],
@@ -32,7 +32,7 @@ export function useStateWithSchema<T extends ZodTypeAny>(
     errors,
     update: useCallback(
       <TKey extends keyof z.infer<T>>(key: TKey, value: z.infer<T>[TKey]) => {
-        setState((prevState) => ({ ...prevState, [key]: value }));
+        setState(prevState => ({ ...prevState, [key]: value }));
       },
       [],
     ),

apps/console/src/hooks/useVendorSearch.ts

@@ -7,7 +7,7 @@ export function useVendorSearch() {
   const [query, setQuery] = useState("");
   const [vendors, setVendors] = useState<Vendor[]>([]);
   useEffect(() => {
-    import("@probo/vendors").then((module) => {
+    void import("@probo/vendors").then((module) => {
       const ms = new MiniSearch({
         fields: ["name"],
         storeFields: Object.keys(module.default[0]),
@@ -16,7 +16,7 @@ export function useVendorSearch() {
           prefix: true,
         },
       });
-      ms.addAll(module.default.map((v) => ({ ...v, id: v.name })));
+      ms.addAll(module.default.map(v => ({ ...v, id: v.name })));
       // @ts-expect-error not enough types to handle this case
       searchRef.current = ms.search.bind(ms);
     });

apps/console/src/layouts/PublicTrustCenterLayout.tsx

@@ -49,15 +49,17 @@ export function PublicTrustCenterLayout({
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center space-x-4">
-              {organizationLogo ? (
-                <img
-                  src={organizationLogo}
-                  alt={organizationName}
-                  className="h-8 w-8 rounded"
-                />
-              ) : (
-                <Logo className="h-8 w-8" />
-              )}
+              {organizationLogo
+                ? (
+                    <img
+                      src={organizationLogo}
+                      alt={organizationName}
+                      className="h-8 w-8 rounded"
+                    />
+                  )
+                : (
+                    <Logo className="h-8 w-8" />
+                  )}
               <div>
                 <h1 className="text-lg font-semibold text-txt-primary">
                   {organizationName}
@@ -85,7 +87,7 @@ export function PublicTrustCenterLayout({
                 <Button
                   variant="tertiary"
                   icon={IconArrowBoxLeft}
-                  onClick={handleLogout}
+                  onClick={() => void handleLogout()}
                   title={__("Logout")}
                   className="text-sm"
                 />

apps/console/src/main.tsx

@@ -17,5 +17,5 @@ createRoot(document.getElementById("root")!).render(
     <TranslatorProvider>
       <App />
     </TranslatorProvider>
-  </QueryClientProvider>
+  </QueryClientProvider>,
 );

apps/console/src/pages/DocumentSigningRequestsPage.tsx

@@ -34,8 +34,8 @@ export default function DocumentSigningRequestsPage() {
   const [loading, setLoading] = useState(true);
   const [signing, setSigning] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [signingData, setSigningData] =
-    useState<DocumentSigningResponse | null>(null);
+  const [signingData, setSigningData]
+    = useState<DocumentSigningResponse | null>(null);
   const [currentDocIndex, setCurrentDocIndex] = useState(0);
   const [showAllDocuments, setShowAllDocuments] = useState(false);
 
@@ -53,7 +53,7 @@ export default function DocumentSigningRequestsPage() {
   useEffect(() => {
     if (!token) {
       setError(
-        __("Missing signing token. Please check your URL and try again.")
+        __("Missing signing token. Please check your URL and try again."),
       );
       setLoading(false);
       return;
@@ -66,26 +66,26 @@ export default function DocumentSigningRequestsPage() {
           {
             method: "GET",
             headers: {
-              Authorization: `Bearer ${token}`,
+              "Authorization": `Bearer ${token}`,
               "Content-Type": "application/json",
             },
-          }
+          },
         );
 
         if (!response.ok) {
           throw new Error(__("Failed to fetch signing documents"));
         }
 
-        const documents: Document[] = await response.json();
+        const documents = (await response.json()) as Document[];
 
-        const enhancedDocuments = documents.map((doc) => ({
+        const enhancedDocuments = documents.map(doc => ({
           ...doc,
           signed: false,
         }));
 
         // Extract organization name from the first document
-        const organizationName =
-          documents.length > 0
+        const organizationName
+          = documents.length > 0
             ? documents[0].organization_name || "Organization"
             : "Organization";
 
@@ -95,14 +95,14 @@ export default function DocumentSigningRequestsPage() {
         });
       } catch (err) {
         setError(
-          err instanceof Error ? err.message : __("An unknown error occurred")
+          err instanceof Error ? err.message : __("An unknown error occurred"),
         );
       } finally {
         setLoading(false);
       }
     }
 
-    fetchDocuments();
+    void fetchDocuments();
   }, [token, __]);
 
   const handleSignDocument = async () => {
@@ -117,10 +117,10 @@ export default function DocumentSigningRequestsPage() {
         {
           method: "POST",
           headers: {
-            Authorization: `Bearer ${token}`,
+            "Authorization": `Bearer ${token}`,
             "Content-Type": "application/json",
           },
-        }
+        },
       );
 
       if (!response.ok) {
@@ -146,7 +146,7 @@ export default function DocumentSigningRequestsPage() {
       }
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : __("Failed to sign document")
+        err instanceof Error ? err.message : __("Failed to sign document"),
       );
     } finally {
       setSigning(false);
@@ -161,7 +161,7 @@ export default function DocumentSigningRequestsPage() {
 
   const getSignedCount = () => {
     if (!signingData) return 0;
-    return signingData.documents.filter((doc) => doc.signed).length;
+    return signingData.documents.filter(doc => doc.signed).length;
   };
 
   if (loading) {
@@ -217,7 +217,7 @@ export default function DocumentSigningRequestsPage() {
             </h1>
             <p className="text-txt-tertiary">
               {__(
-                "There are no documents requiring your signature at this time."
+                "There are no documents requiring your signature at this time.",
               )}
             </p>
           </Card>
@@ -247,165 +247,167 @@ export default function DocumentSigningRequestsPage() {
             <h1 className="text-2xl font-semibold mb-6">
               {sprintf(
                 __("%s requests your signature"),
-                signingData.organizationName
+                signingData.organizationName,
               )}
             </h1>
-            {allSigned ? (
-              <p className="text-txt-secondary text-base">
-                {__(
-                  "You have successfully signed all documents. You can now close this page."
+            {allSigned
+              ? (
+                  <p className="text-txt-secondary text-base">
+                    {__("You have successfully signed all documents. You can now close this page.")}
+                  </p>
+                )
+              : (
+                  <>
+                    <p className="text-txt-secondary text-base mb-4">
+                      {__("Please review and sign the following documents:")}
+                    </p>
+                    <Card className="mb-6 overflow-hidden">
+                      <div className="divide-y divide-border-solid">
+                        {(() => {
+                          const renderDocumentItem = (
+                            doc: Document,
+                            index: number,
+                          ) => (
+                            <div
+                              key={doc.document_version_id}
+                              className={clsx(
+                                "flex items-center gap-3 py-3 px-4 transition-colors",
+                                index === currentDocIndex
+                                  ? "bg-blue-50 border-l-4 border-blue-500"
+                                  : "bg-transparent hover:bg-level-1",
+                              )}
+                            >
+                              <div className="flex items-center justify-center w-8 h-8 rounded-full bg-level-2 flex-shrink-0">
+                                {doc.signed
+                                  ? (
+                                      <IconCircleCheck
+                                        size={20}
+                                        className="text-txt-success"
+                                      />
+                                    )
+                                  : (
+                                      <span className="text-sm font-semibold text-txt-tertiary">
+                                        {index + 1}
+                                      </span>
+                                    )}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p
+                                  className={clsx(
+                                    "text-sm font-medium truncate",
+                                    doc.signed
+                                      ? "text-txt-tertiary"
+                                      : "text-txt-primary",
+                                  )}
+                                >
+                                  {doc.title}
+                                </p>
+                              </div>
+                              <div className="flex-shrink-0">
+                                <span
+                                  className={clsx(
+                                    "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
+                                    doc.signed
+                                      ? "bg-green-100 text-green-800"
+                                      : index === currentDocIndex
+                                        ? "bg-blue-100 text-blue-800"
+                                        : "bg-gray-100 text-gray-700",
+                                  )}
+                                >
+                                  {doc.signed
+                                    ? __("Signed")
+                                    : index === currentDocIndex
+                                      ? __("In review")
+                                      : __("Waiting signature")}
+                                </span>
+                              </div>
+                            </div>
+                          );
+
+                          const totalDocs = signingData.documents.length;
+
+                          if (totalDocs <= 4) {
+                            return signingData.documents.map((doc, index) =>
+                              renderDocumentItem(doc, index),
+                            );
+                          }
+
+                          if (showAllDocuments) {
+                            return (
+                              <>
+                                {signingData.documents.map((doc, index) =>
+                                  renderDocumentItem(doc, index),
+                                )}
+                                <button
+                                  onClick={() => setShowAllDocuments(false)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {__("Show less")}
+                                </button>
+                              </>
+                            );
+                          }
+
+                          // Always show current document in collapsed view with two "show more" buttons
+                          const firstDoc = signingData.documents[0];
+                          const currentIsFirst = currentDocIndex === 0;
+                          const currentIsLast = currentDocIndex === totalDocs - 1;
+
+                          // Calculate hidden docs before and after current
+                          const hiddenBeforeCurrent = currentIsFirst
+                            ? 0
+                            : currentDocIndex - 1;
+                          const hiddenAfterCurrent = currentIsLast
+                            ? 0
+                            : totalDocs - currentDocIndex - 2;
+
+                          return (
+                            <>
+                              {/* First document */}
+                              {renderDocumentItem(firstDoc, 0)}
+
+                              {/* Show more button for documents BEFORE current (signed documents) */}
+                              {hiddenBeforeCurrent > 0 && (
+                                <button
+                                  onClick={() => setShowAllDocuments(true)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {sprintf(
+                                    __("Show %s more documents"),
+                                    hiddenBeforeCurrent,
+                                  )}
+                                </button>
+                              )}
+
+                              {/* Current document (if not first) */}
+                              {!currentIsFirst
+                                && renderDocumentItem(currentDoc, currentDocIndex)}
+
+                              {/* Show more button for documents AFTER current (upcoming documents) */}
+                              {hiddenAfterCurrent > 0 && (
+                                <button
+                                  onClick={() => setShowAllDocuments(true)}
+                                  className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
+                                >
+                                  <span className="text-txt-tertiary">•••</span>
+                                  {sprintf(
+                                    __("Show %s more documents"),
+                                    hiddenAfterCurrent,
+                                  )}
+                                </button>
+                              )}
+                            </>
+                          );
+                        })()}
+                      </div>
+                    </Card>
+                    <p className="text-txt-secondary text-sm mb-6">
+                      {__("Please review the document carefully before signing.")}
+                    </p>
+                  </>
                 )}
-              </p>
-            ) : (
-              <>
-                <p className="text-txt-secondary text-base mb-4">
-                  {__("Please review and sign the following documents:")}
-                </p>
-                <Card className="mb-6 overflow-hidden">
-                  <div className="divide-y divide-border-solid">
-                    {(() => {
-                      const renderDocumentItem = (
-                        doc: Document,
-                        index: number
-                      ) => (
-                        <div
-                          key={doc.document_version_id}
-                          className={clsx(
-                            "flex items-center gap-3 py-3 px-4 transition-colors",
-                            index === currentDocIndex
-                              ? "bg-blue-50 border-l-4 border-blue-500"
-                              : "bg-transparent hover:bg-level-1"
-                          )}
-                        >
-                          <div className="flex items-center justify-center w-8 h-8 rounded-full bg-level-2 flex-shrink-0">
-                            {doc.signed ? (
-                              <IconCircleCheck
-                                size={20}
-                                className="text-txt-success"
-                              />
-                            ) : (
-                              <span className="text-sm font-semibold text-txt-tertiary">
-                                {index + 1}
-                              </span>
-                            )}
-                          </div>
-                          <div className="flex-1 min-w-0">
-                            <p
-                              className={clsx(
-                                "text-sm font-medium truncate",
-                                doc.signed
-                                  ? "text-txt-tertiary"
-                                  : "text-txt-primary"
-                              )}
-                            >
-                              {doc.title}
-                            </p>
-                          </div>
-                          <div className="flex-shrink-0">
-                            <span
-                              className={clsx(
-                                "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
-                                doc.signed
-                                  ? "bg-green-100 text-green-800"
-                                  : index === currentDocIndex
-                                    ? "bg-blue-100 text-blue-800"
-                                    : "bg-gray-100 text-gray-700"
-                              )}
-                            >
-                              {doc.signed
-                                ? __("Signed")
-                                : index === currentDocIndex
-                                  ? __("In review")
-                                  : __("Waiting signature")}
-                            </span>
-                          </div>
-                        </div>
-                      );
-
-                      const totalDocs = signingData.documents.length;
-
-                      if (totalDocs <= 4) {
-                        return signingData.documents.map((doc, index) =>
-                          renderDocumentItem(doc, index)
-                        );
-                      }
-
-                      if (showAllDocuments) {
-                        return (
-                          <>
-                            {signingData.documents.map((doc, index) =>
-                              renderDocumentItem(doc, index)
-                            )}
-                            <button
-                              onClick={() => setShowAllDocuments(false)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {__("Show less")}
-                            </button>
-                          </>
-                        );
-                      }
-
-                      // Always show current document in collapsed view with two "show more" buttons
-                      const firstDoc = signingData.documents[0];
-                      const currentIsFirst = currentDocIndex === 0;
-                      const currentIsLast = currentDocIndex === totalDocs - 1;
-
-                      // Calculate hidden docs before and after current
-                      const hiddenBeforeCurrent = currentIsFirst
-                        ? 0
-                        : currentDocIndex - 1;
-                      const hiddenAfterCurrent = currentIsLast
-                        ? 0
-                        : totalDocs - currentDocIndex - 2;
-
-                      return (
-                        <>
-                          {/* First document */}
-                          {renderDocumentItem(firstDoc, 0)}
-
-                          {/* Show more button for documents BEFORE current (signed documents) */}
-                          {hiddenBeforeCurrent > 0 && (
-                            <button
-                              onClick={() => setShowAllDocuments(true)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {sprintf(
-                                __("Show %s more documents"),
-                                hiddenBeforeCurrent
-                              )}
-                            </button>
-                          )}
-
-                          {/* Current document (if not first) */}
-                          {!currentIsFirst &&
-                            renderDocumentItem(currentDoc, currentDocIndex)}
-
-                          {/* Show more button for documents AFTER current (upcoming documents) */}
-                          {hiddenAfterCurrent > 0 && (
-                            <button
-                              onClick={() => setShowAllDocuments(true)}
-                              className="w-full py-3 px-4 text-sm text-txt-secondary hover:bg-level-1 transition-colors text-left flex items-center gap-2"
-                            >
-                              <span className="text-txt-tertiary">•••</span>
-                              {sprintf(
-                                __("Show %s more documents"),
-                                hiddenAfterCurrent
-                              )}
-                            </button>
-                          )}
-                        </>
-                      );
-                    })()}
-                  </div>
-                </Card>
-                <p className="text-txt-secondary text-sm mb-6">
-                  {__("Please review the document carefully before signing.")}
-                </p>
-              </>
-            )}
             {isMobile && pdfUrl && (
               <Button variant="secondary" asChild className="my-6 w-full">
                 <a target="_blank" rel="noopener noreferrer" href={pdfUrl}>
@@ -416,7 +418,7 @@ export default function DocumentSigningRequestsPage() {
             {!currentDoc.signed && !allSigned && (
               <>
                 <Button
-                  onClick={handleSignDocument}
+                  onClick={() => void handleSignDocument()}
                   className="h-10 w-full"
                   icon={signing ? Spinner : undefined}
                   disabled={signing}
@@ -425,7 +427,7 @@ export default function DocumentSigningRequestsPage() {
                 </Button>
                 <p className="text-xs text-txt-tertiary mt-2">
                   {__(
-                    "By clicking 'I acknowledge and agree', your digital signature will be recorded."
+                    "By clicking 'I acknowledge and agree', your digital signature will be recorded.",
                   )}
                 </p>
               </>
@@ -439,10 +441,12 @@ export default function DocumentSigningRequestsPage() {
               href="https://www.getprobo.com/"
               className={clsx(
                 "flex gap-1 text-sm font-medium text-txt-tertiary items-center w-max mx-auto",
-                isMobile ? "mt-15" : "mt-30"
+                isMobile ? "mt-15" : "mt-30",
               )}
             >
-              Powered by <Logo withPicto className="h-6" />
+              Powered by
+              {" "}
+              <Logo withPicto className="h-6" />
             </a>
           </div>
           {isDesktop && (

apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx

@@ -6,8 +6,8 @@ import type { APIKeysPageQuery } from "/__generated__/iam/APIKeysPageQuery.graph
 import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 
 function APIKeysPageLoaderInner() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<APIKeysPageQuery>(apiKeysPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<APIKeysPageQuery>(apiKeysPageQuery);
 
   useEffect(() => {
     loadQuery({});

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyList.tsx

@@ -107,25 +107,25 @@ export function PersonalAPIKeyList(props: {
 
   const connectionID = ConnectionHandler.getConnectionID(
     viewer.id,
-    "PersonalAPIKeyListFragment_personalAPIKeys"
+    "PersonalAPIKeyListFragment_personalAPIKeys",
   );
 
-  const { formState, handleSubmit, register, control, reset } =
-    useFormWithSchema(createSchema, {
+  const { formState, handleSubmit, register, control, reset }
+    = useFormWithSchema(createSchema, {
       defaultValues: {
         name: new Date().toISOString().split("T")[0],
         expiresIn: "1month",
       },
     });
 
-  const [createCommit, isCreating] =
-    useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
+  const [createCommit, isCreating]
+    = useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
 
   const handleCreate = (data: CreateFormData) => {
     const expiresAt = computeExpiresAt(data.expiresIn);
     const connectionID = ConnectionHandler.getConnectionID(
       viewer.id,
-      "PersonalAPIKeyListFragment_personalAPIKeys"
+      "PersonalAPIKeyListFragment_personalAPIKeys",
     );
 
     createCommit({
@@ -170,25 +170,27 @@ export function PersonalAPIKeyList(props: {
           </Button>
         </div>
 
-        {viewer.personalAPIKeys.edges.length === 0 ? (
-          <Card padded>
-            <div className="text-center py-12">
-              <h3 className="text-lg font-medium text-gray-900 mb-2">
-                {__("No API keys")}
-              </h3>
-              <p className="text-gray-600 mb-6">
-                {__("Create an API key to authenticate programmatic access.")}
-              </p>
-            </div>
-          </Card>
-        ) : (
-          <Card padded>
-            <PersonalAPIKeysTable
-              edges={viewer.personalAPIKeys.edges}
-              connectionId={connectionID}
-            />
-          </Card>
-        )}
+        {viewer.personalAPIKeys.edges.length === 0
+          ? (
+              <Card padded>
+                <div className="text-center py-12">
+                  <h3 className="text-lg font-medium text-gray-900 mb-2">
+                    {__("No API keys")}
+                  </h3>
+                  <p className="text-gray-600 mb-6">
+                    {__("Create an API key to authenticate programmatic access.")}
+                  </p>
+                </div>
+              </Card>
+            )
+          : (
+              <Card padded>
+                <PersonalAPIKeysTable
+                  edges={viewer.personalAPIKeys.edges}
+                  connectionId={connectionID}
+                />
+              </Card>
+            )}
       </div>
 
       <Dialog
@@ -196,7 +198,7 @@ export function PersonalAPIKeyList(props: {
         title={<Breadcrumb items={[__("API Keys"), __("Create")]} />}
         onClose={() => reset()}
       >
-        <form onSubmit={handleSubmit(handleCreate)}>
+        <form onSubmit={e => void handleSubmit(handleCreate)(e)}>
           <DialogContent padded className="space-y-5">
             <Field error={formState.errors.name?.message}>
               <Label>{__("Name")}</Label>

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyRow.tsx

@@ -46,8 +46,8 @@ export function PersonalAPIKeyRow(props: {
   const key = useFragment(personalAPIKeyRowFragment, fKey);
   const expired = new Date(key.expiresAt) < now;
 
-  const [revokeCommit, isRevoking] =
-    useMutation<PersonalAPIKeyRow_revokeMutation>(revokeMutation);
+  const [revokeCommit, isRevoking]
+    = useMutation<PersonalAPIKeyRow_revokeMutation>(revokeMutation);
 
   const handleRevoke = () => {
     confirm(
@@ -64,11 +64,11 @@ export function PersonalAPIKeyRow(props: {
                   title: __("Error"),
                   description: formatError(
                     __("Failed to revoke API key."),
-                    errors as GraphQLError[]
+                    errors as GraphQLError[],
                   ),
                   variant: "error",
                 });
-                reject(errors);
+                reject(new Error(errors[0]?.message ?? __("Failed to revoke API key.")));
                 return;
               }
               toast({
@@ -83,7 +83,7 @@ export function PersonalAPIKeyRow(props: {
                 title: __("Error"),
                 description: formatError(
                   __("Failed to revoke API key."),
-                  error
+                  error,
                 ),
                 variant: "error",
               });
@@ -95,11 +95,11 @@ export function PersonalAPIKeyRow(props: {
       {
         title: __("Revoke API Key"),
         message: __(
-          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`
+          `Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`,
         ),
         label: __("Revoke"),
         variant: "danger",
-      }
+      },
     );
   };
 

apps/console/src/pages/iam/apiKeys/_components/PersonalAPIKeyTokenAction.tsx

@@ -34,14 +34,14 @@ export function PersonalAPIKeyTokenAction(props: {
               title: __("Error"),
               description: formatError(
                 __("Failed to load API key token."),
-                error
+                error,
               ),
               variant: "error",
             });
             dialogRef.current?.close();
           }
         },
-      }
+      },
     );
   };
 

apps/console/src/pages/iam/auth/ForgotPasswordPage.tsx

@@ -39,7 +39,7 @@ export default function ForgotPasswordPage() {
     sendInstructionsMutation,
   );
 
-  const onSubmit = handleSubmit(async ({ email }) => {
+  const onSubmit = handleSubmit(({ email }) => {
     sendInstructions({
       variables: {
         input: { email },
@@ -74,82 +74,87 @@ export default function ForgotPasswordPage() {
     });
   });
 
-  return instructionsSent ? (
-    <div className="space-y-6 w-full max-w-md mx-auto">
-      <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
-        <p className="text-txt-tertiary">
-          {__("We've sent password reset instructions to your email address")}
-        </p>
-      </div>
+  return instructionsSent
+    ? (
+        <div className="space-y-6 w-full max-w-md mx-auto">
+          <div className="space-y-2 text-center">
+            <h1 className="text-3xl font-bold">{__("Check your email")}</h1>
+            <p className="text-txt-tertiary">
+              {__("We've sent password reset instructions to your email address")}
+            </p>
+          </div>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Didn't receive the email?")}{" "}
-          <button
-            onClick={() => setInstructionsSent(false)}
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Try again")}
-          </button>
-        </p>
-      </div>
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Didn't receive the email?")}
+              {" "}
+              <button
+                onClick={() => setInstructionsSent(false)}
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Try again")}
+              </button>
+            </p>
+          </div>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
-          <Link
-            to="/auth/login"
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Back to login")}
-          </Link>
-        </p>
-      </div>
-    </div>
-  ) : (
-    <div className="space-y-6 w-full max-w-md mx-auto">
-      <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
-        <p className="text-txt-tertiary">
-          {__(
-            "Enter your email address and we'll send you instructions to reset your password",
-          )}
-        </p>
-      </div>
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Remember your password?")}
+              {" "}
+              <Link
+                to="/auth/login"
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Back to login")}
+              </Link>
+            </p>
+          </div>
+        </div>
+      )
+    : (
+        <div className="space-y-6 w-full max-w-md mx-auto">
+          <div className="space-y-2 text-center">
+            <h1 className="text-3xl font-bold">{__("Forgot Password")}</h1>
+            <p className="text-txt-tertiary">
+              {__(
+                "Enter your email address and we'll send you instructions to reset your password",
+              )}
+            </p>
+          </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
-        <Field
-          label={__("Email")}
-          type="email"
-          placeholder={__("name@example.com")}
-          {...register("email")}
-          required
-          error={formState.errors.email?.message}
-        />
+          <form onSubmit={e => void onSubmit(e)} className="space-y-4">
+            <Field
+              label={__("Email")}
+              type="email"
+              placeholder={__("name@example.com")}
+              {...register("email")}
+              required
+              error={formState.errors.email?.message}
+            />
 
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={formState.isSubmitting}
-        >
-          {formState.isSubmitting
-            ? __("Sending instructions...")
-            : __("Send reset instructions")}
-        </Button>
-      </form>
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={formState.isSubmitting}
+            >
+              {formState.isSubmitting
+                ? __("Sending instructions...")
+                : __("Send reset instructions")}
+            </Button>
+          </form>
 
-      <div className="text-center">
-        <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
-          <Link
-            to="/auth/login"
-            className="underline text-txt-primary hover:text-txt-secondary"
-          >
-            {__("Back to login")}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
+          <div className="text-center">
+            <p className="text-sm text-txt-tertiary">
+              {__("Remember your password?")}
+              {" "}
+              <Link
+                to="/auth/login"
+                className="underline text-txt-primary hover:text-txt-secondary"
+              >
+                {__("Back to login")}
+              </Link>
+            </p>
+          </div>
+        </div>
+      );
 }

apps/console/src/pages/iam/auth/ResetPasswordPage.tsx

@@ -22,7 +22,7 @@ const schema = z
     password: z.string().min(8),
     confirmPassword: z.string().min(8),
   })
-  .refine((data) => data.password === data.confirmPassword, {
+  .refine(data => data.password === data.confirmPassword, {
     message: "Passwords don't match",
     path: ["confirmPassword"],
   });
@@ -47,7 +47,7 @@ export default function ResetPasswordPage() {
     resetPasswordMutation,
   );
 
-  const onSubmit = handleSubmit(async (data) => {
+  const onSubmit = handleSubmit((data) => {
     if (!token) {
       toast({
         title: __("Reset failed"),
@@ -88,7 +88,7 @@ export default function ResetPasswordPage() {
           description: __("Password reset successfully"),
           variant: "success",
         });
-        navigate("/auth/login", { replace: true });
+        void navigate("/auth/login", { replace: true });
       },
     });
   });
@@ -102,7 +102,7 @@ export default function ResetPasswordPage() {
         </p>
       </div>
 
-      <form onSubmit={onSubmit} className="space-y-4">
+      <form onSubmit={e => void onSubmit(e)} className="space-y-4">
         <Field
           label={__("New Password")}
           type="password"
@@ -130,7 +130,8 @@ export default function ResetPasswordPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Remember your password?")}{" "}
+          {__("Remember your password?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"

apps/console/src/pages/iam/auth/VerifyEmailPage.tsx

@@ -37,10 +37,10 @@ export default function VerifyEmailPage() {
     },
   });
 
-  const [verifyEmail] =
-    useMutation<VerifyEmailPageMutation>(verifyEmailMutation);
+  const [verifyEmail]
+    = useMutation<VerifyEmailPageMutation>(verifyEmailMutation);
 
-  const handleSubmit = form.handleSubmit(async (data) => {
+  const handleSubmit = form.handleSubmit((data) => {
     verifyEmail({
       variables: {
         input: {
@@ -83,40 +83,42 @@ export default function VerifyEmailPage() {
         </p>
       </div>
 
-      {isConfirmed ? (
-        <div className="space-y-4 text-center">
-          <p className="text-green-600 dark:text-green-400">
-            {__("Your email has been confirmed successfully!")}
-          </p>
-          <Button to="/auth/login" className="w-full">
-            {__("Proceed to Login")}
-          </Button>
-        </div>
-      ) : (
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <Field
-            label={__("Confirmation Token")}
-            type="text"
-            placeholder={__("Enter your confirmation token")}
-            {...form.register("token")}
-            error={form.formState.errors.token?.message}
-            disabled={form.formState.isSubmitting}
-            help={__(
-              "The token has been automatically filled from the URL if available",
-            )}
-          />
+      {isConfirmed
+        ? (
+            <div className="space-y-4 text-center">
+              <p className="text-green-600 dark:text-green-400">
+                {__("Your email has been confirmed successfully!")}
+              </p>
+              <Button to="/auth/login" className="w-full">
+                {__("Proceed to Login")}
+              </Button>
+            </div>
+          )
+        : (
+            <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
+              <Field
+                label={__("Confirmation Token")}
+                type="text"
+                placeholder={__("Enter your confirmation token")}
+                {...form.register("token")}
+                error={form.formState.errors.token?.message}
+                disabled={form.formState.isSubmitting}
+                help={__(
+                  "The token has been automatically filled from the URL if available",
+                )}
+              />
 
-          <Button
-            type="submit"
-            className="w-full"
-            disabled={form.formState.isSubmitting}
-          >
-            {form.formState.isSubmitting
-              ? __("Confirming...")
-              : __("Confirm Email")}
-          </Button>
-        </form>
-      )}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting
+                  ? __("Confirming...")
+                  : __("Confirm Email")}
+              </Button>
+            </form>
+          )}
 
       <div className="text-center">
         {!isConfirmed && (

apps/console/src/pages/iam/auth/sign-in/PasswordSignInPage.tsx

@@ -22,14 +22,14 @@ export default function PasswordSignInPage() {
 
   const { toast } = useToast();
 
-  const [signIn, isSigningIn] =
-    useMutation<PasswordSignInPageMutation>(signInMutation);
+  const [signIn, isSigningIn]
+    = useMutation<PasswordSignInPageMutation>(signInMutation);
 
   const handlePasswordLogin: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const emailValue = formData.get("email")?.toString();
-    const passwordValue = formData.get("password")?.toString();
+    const emailValue = formData.get("email") ? (formData.get("email") as string).toString() : "";
+    const passwordValue = formData.get("password") ? (formData.get("password") as string).toString() : "";
 
     if (!emailValue || !passwordValue) return;
 
@@ -104,14 +104,16 @@ export default function PasswordSignInPage() {
       </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Don't have an account ?")}{" "}
+        {__("Don't have an account ?")}
+        {" "}
         <Link to="/auth/register" className="underline hover:text-txt-primary">
           {__("Register")}
         </Link>
       </div>
 
       <div className="text-center text-sm text-txt-secondary">
-        {__("Forgot password?")}{" "}
+        {__("Forgot password?")}
+        {" "}
         <Link
           to="/auth/forgot-password"
           className="underline hover:text-txt-primary"

apps/console/src/pages/iam/auth/sign-in/SSOSignInPage.tsx

@@ -19,15 +19,15 @@ const ssoAvailabilityQuery = graphql`
 export default function SSOSignInPage() {
   const { __ } = useTranslate();
 
-  const [queryRef, loadQuery] =
-    useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<SSOSignInPageQuery>(ssoAvailabilityQuery);
   const [checking, setChecking] = useState(false);
 
   const handleSSOCheck: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     setChecking(true);
     const formData = new FormData(e.currentTarget);
-    const email = formData.get("email")?.toString();
+    const email = formData.get("email") ? (formData.get("email") as string).toString() : "";
 
     if (!email) return;
 
@@ -66,7 +66,8 @@ export default function SSOSignInPage() {
         </Button>
 
         <div className="text-center mt-6 text-sm text-txt-secondary">
-          {__("Don't have an account ?")}{" "}
+          {__("Don't have an account ?")}
+          {" "}
           <Link
             to="/auth/register"
             className="underline hover:text-txt-primary"
@@ -112,7 +113,7 @@ function NavigateToSSOLoginURL(props: {
         variant: "error",
       });
 
-      navigate("/auth/login");
+      void navigate("/auth/login");
       return;
     }
 

apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx

@@ -37,14 +37,16 @@ export default function SignInPage() {
       </Button>
 
       <div className="text-center mt-6 text-sm text-txt-secondary">
-        {__("Don't have an account ?")}{" "}
+        {__("Don't have an account ?")}
+        {" "}
         <Link to="/auth/register" className="underline hover:text-txt-primary">
           {__("Register")}
         </Link>
       </div>
 
       <div className="text-center text-sm text-txt-secondary">
-        {__("Forgot password?")}{" "}
+        {__("Forgot password?")}
+        {" "}
         <Link
           to="/auth/forgot-password"
           className="underline hover:text-txt-primary"

apps/console/src/pages/iam/auth/sign-up/SignUpFromInvitationPage.tsx

@@ -81,7 +81,7 @@ export default function SignUpFromInvitationPage() {
           ),
           variant: "success",
         });
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
       onError: (e) => {
         toast({
@@ -102,7 +102,7 @@ export default function SignUpFromInvitationPage() {
         </p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"
@@ -130,7 +130,8 @@ export default function SignUpFromInvitationPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}{" "}
+          {__("Already have an account?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"

apps/console/src/pages/iam/auth/sign-up/SignUpPage.tsx

@@ -67,7 +67,7 @@ export default function SignUpPage() {
           description: __("Account created successfully"),
           variant: "success",
         });
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
       onError: (e) => {
         toast({
@@ -88,7 +88,7 @@ export default function SignUpPage() {
         </p>
       </div>
 
-      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={e => void handleSubmit(onSubmit)(e)} className="space-y-4">
         <Field
           label={__("Full Name")}
           type="text"
@@ -125,7 +125,8 @@ export default function SignUpPage() {
 
       <div className="text-center">
         <p className="text-sm text-txt-tertiary">
-          {__("Already have an account?")}{" "}
+          {__("Already have an account?")}
+          {" "}
           <Link
             to="/auth/login"
             className="underline text-txt-primary hover:text-txt-secondary"

apps/console/src/pages/iam/memberships/MembershipsPage.tsx

@@ -118,15 +118,17 @@ export function MembershipsPage(props: {
                   onValueChange={setSearch}
                 />
               </div>
-              {memberships.length === 0 ? (
-                <div className="text-center text-txt-secondary py-4">
-                  {__("No organizations found")}
-                </div>
-              ) : (
-                memberships.map(({ node }) => (
-                  <MembershipCard key={node.id} fKey={node} />
-                ))
-              )}
+              {memberships.length === 0
+                ? (
+                    <div className="text-center text-txt-secondary py-4">
+                      {__("No organizations found")}
+                    </div>
+                  )
+                : (
+                    memberships.map(({ node }) => (
+                      <MembershipCard key={node.id} fKey={node} />
+                    ))
+                  )}
             </div>
           )}
           <Card padded>

apps/console/src/pages/iam/memberships/MembershipsPageLoader.tsx

@@ -6,8 +6,8 @@ import { MembershipsPage, membershipsPageQuery } from "./MembershipsPage";
 import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 
 function MembershipsPageLoader() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<MembershipsPageQuery>(membershipsPageQuery);
 
   useEffect(() => {
     loadQuery({});

apps/console/src/pages/iam/memberships/ViewerLayout.tsx

@@ -26,13 +26,13 @@ export function ViewerLayout(props: {
 
   return (
     <Layout
-      headerTrailing={
+      headerTrailing={(
         <div className="ml-auto">
           <Suspense fallback={<Skeleton className="w-32 h-8" />}>
             <ViewerDropdown fKey={viewer} />
           </Suspense>
         </div>
-      }
+      )}
     >
       <Outlet />
     </Layout>

apps/console/src/pages/iam/memberships/ViewerLayoutLoader.tsx

@@ -6,8 +6,8 @@ import { IAMRelayProvider } from "/providers/IAMRelayProvider";
 import { ViewerLayoutLoading } from "./ViewerLayoutLoading";
 
 function ViewerLayoutLoader() {
-  const [queryRef, loadQuery] =
-    useQueryLoader<ViewerLayoutQuery>(viewerLayoutQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<ViewerLayoutQuery>(viewerLayoutQuery);
 
   useEffect(() => {
     loadQuery({});

apps/console/src/pages/iam/memberships/ViewerLayoutLoading.tsx

@@ -4,11 +4,11 @@ import { Outlet } from "react-router";
 export function ViewerLayoutLoading() {
   return (
     <Layout
-      headerTrailing={
+      headerTrailing={(
         <div className="ml-auto">
           <Skeleton className="w-32 h-8" />
         </div>
-      }
+      )}
     >
       <Outlet />
     </Layout>

apps/console/src/pages/iam/memberships/_components/InvitationCard.tsx

@@ -48,16 +48,16 @@ interface InvitationCardProps {
 }
 
 export function InvitationCard(props: InvitationCardProps) {
-  const { pendingInvitationsConnectionId, membershipConnectionId, fKey } =
-    props;
+  const { pendingInvitationsConnectionId, membershipConnectionId, fKey }
+    = props;
 
   const { __ } = useTranslate();
   const { toast } = useToast();
 
   const invitation = useFragment<InvitationCardFragment$key>(fragment, fKey);
 
-  const [acceptInvitation, isAccepting] =
-    useMutation<InvitationCardMutation>(acceptMutation);
+  const [acceptInvitation, isAccepting]
+    = useMutation<InvitationCardMutation>(acceptMutation);
 
   const handleAccept = () => {
     acceptInvitation({
@@ -96,10 +96,14 @@ export function InvitationCard(props: InvitationCardProps) {
             {invitation.organization.name}
           </h3>
           <p className="text-sm text-txt-secondary">
-            {__("Role")}: <span className="font-medium">{invitation.role}</span>
+            {__("Role")}
+            :
+            <span className="font-medium">{invitation.role}</span>
           </p>
           <p className="text-xs text-txt-tertiary">
-            {__("Invited on")} {formatDate(invitation.createdAt)}
+            {__("Invited on")}
+            {" "}
+            {formatDate(invitation.createdAt)}
           </p>
         </div>
         <Button onClick={handleAccept} disabled={isAccepting}>

apps/console/src/pages/iam/memberships/_components/MembershipCard.tsx

@@ -72,11 +72,11 @@ export function MembershipCard(props: MembershipCardProps) {
     fKey,
   );
   const isAuthenticated = !!lastSession;
-  const isExpired =
-    lastSession && parseDate(lastSession.expiresAt) < new Date();
+  const isExpired
+    = lastSession && parseDate(lastSession.expiresAt) < new Date();
 
-  const [assumeOrganizationSession] =
-    useMutation<MembershipCard_assumeMutation>(
+  const [assumeOrganizationSession]
+    = useMutation<MembershipCard_assumeMutation>(
       assumeOrganizationSessionMutation,
     );
 
@@ -96,13 +96,13 @@ export function MembershipCard(props: MembershipCardProps) {
 
         switch (result.__typename) {
           case "PasswordRequired":
-            navigate("auth/login");
+            void navigate("auth/login");
             break;
           case "SAMLAuthenticationRequired":
             window.location.href = result.redirectUrl;
             break;
           default:
-            navigate(`/organizations/${organization.id}`);
+            void navigate(`/organizations/${organization.id}`);
         }
       },
     });
@@ -148,15 +148,17 @@ export function MembershipCard(props: MembershipCardProps) {
           </div>
         </div>
         <div className="flex items-center gap-3">
-          {isAuthenticated ? (
-            <Link to={`/organizations/${organization.id}`}>
-              <Button variant="secondary">{__("Start")}</Button>
-            </Link>
-          ) : (
-            <Button onClick={handleAssumeOrganizationSession}>
-              {__("Login")}
-            </Button>
-          )}
+          {isAuthenticated
+            ? (
+                <Link to={`/organizations/${organization.id}`}>
+                  <Button variant="secondary">{__("Start")}</Button>
+                </Link>
+              )
+            : (
+                <Button onClick={handleAssumeOrganizationSession}>
+                  {__("Login")}
+                </Button>
+              )}
         </div>
       </div>
     </Card>

apps/console/src/pages/iam/memberships/_components/ViewerDropdown.tsx

@@ -35,8 +35,8 @@ export function ViewerDropdown(props: { fKey: ViewerDropdownFragment$key }) {
   const { __ } = useTranslate();
   const { toast } = useToast();
 
-  const { canListAPIKeys, email, fullName } =
-    useFragment<ViewerDropdownFragment$key>(fragment, fKey);
+  const { canListAPIKeys, email, fullName }
+    = useFragment<ViewerDropdownFragment$key>(fragment, fKey);
   const [signOut] = useMutation(signOutMutation);
 
   const handleLogout: React.MouseEventHandler<HTMLAnchorElement> = (e) => {

apps/console/src/pages/iam/organizations/NewOrganizationPage.tsx

@@ -31,13 +31,13 @@ function NewOrganizationPage() {
   const { toast } = useToast();
   const { __ } = useTranslate();
 
-  const [createOrganization, isCreating] =
-    useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
+  const [createOrganization, isCreating]
+    = useMutation<NewOrganizationPageMutation>(createOrganizationMutation);
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    const name = formData.get("name")?.toString();
+    const name = formData.get("name") ? (formData.get("name") as string).toString() : "";
     if (!name) {
       toast({
         title: __("Error"),
@@ -47,7 +47,7 @@ function NewOrganizationPage() {
       return;
     }
 
-    createOrganization({
+    void createOrganization({
       variables: {
         input: {
           name,
@@ -64,7 +64,7 @@ function NewOrganizationPage() {
         }
 
         const org = r.createOrganization!.organization;
-        navigate(`/organizations/${org!.id}`);
+        void navigate(`/organizations/${org!.id}`);
         toast({
           title: __("Success"),
           description: __("Organization has been created successfully"),
@@ -84,7 +84,7 @@ function NewOrganizationPage() {
   return (
     <div className="space-y-6">
       <Link
-        to={location.state?.from ?? "/"}
+        to={(location.state as { from: string })?.from ?? "/"}
         className="mb-4 inline-flex gap-2 items-center"
       >
         <IconChevronLeft size={16} />
@@ -97,7 +97,7 @@ function NewOrganizationPage() {
         )}
       />
       <Card padded asChild>
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={e => void handleSubmit(e)} className="space-y-4">
           <h2 className="text-xl font-semibold mb-1">
             {__("Organization Details")}
           </h2>

apps/console/src/pages/iam/organizations/ViewerMembershipLayout.tsx

@@ -47,8 +47,8 @@ export function ViewerMembershipLayout(props: {
 
   const { __ } = useTranslate();
 
-  const { organization, viewer } =
-    usePreloadedQuery<ViewerMembershipLayoutQuery>(
+  const { organization, viewer }
+    = usePreloadedQuery<ViewerMembershipLayoutQuery>(
       viewerMembershipLayoutQuery,
       queryRef,
     );
@@ -58,7 +58,7 @@ export function ViewerMembershipLayout(props: {
 
   return (
     <Layout
-      headerLeading={
+      headerLeading={(
         <>
           <MembershipsDropdown
             organizationFKey={organization}
@@ -77,12 +77,12 @@ export function ViewerMembershipLayout(props: {
             </Link>
           )}
         </>
-      }
-      headerTrailing={
+      )}
+      headerTrailing={(
         <Suspense fallback={<Skeleton className="w-32 h-8" />}>
           <ViewerMembershipDropdown fKey={organization} />
         </Suspense>
-      }
+      )}
       sidebar={!hideSidebar && <Sidebar fKey={organization} />}
     >
       <CoreRelayProvider>

apps/console/src/pages/iam/organizations/_components/MembershipsDropdown.tsx

@@ -46,8 +46,8 @@ export function MembershipsDropdown(props: {
   const { __ } = useTranslate();
   const [search, setSearch] = useState("");
 
-  const currentOrganization =
-    useFragment<MembershipsDropdown_organizationFragment$key>(
+  const currentOrganization
+    = useFragment<MembershipsDropdown_organizationFragment$key>(
       organizationFragment,
       organizationFKey,
     );
@@ -72,7 +72,7 @@ export function MembershipsDropdown(props: {
     <div className="flex items-center gap-1">
       <Dropdown
         onOpenChange={handleOpenMenu}
-        toggle={
+        toggle={(
           <Button
             className="-ml-3"
             variant="tertiary"
@@ -80,7 +80,7 @@ export function MembershipsDropdown(props: {
           >
             {currentOrganization.name}
           </Button>
-        }
+        )}
       >
         <div className="px-3 py-2">
           <Input
@@ -97,11 +97,11 @@ export function MembershipsDropdown(props: {
         <div className="max-h-150 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent hover:scrollbar-thumb-gray-400">
           {queryRef && (
             <Suspense
-              fallback={
+              fallback={(
                 <div className="px-3 py-2 text-gray-500">
                   {__("Loading organizations...")}
                 </div>
-              }
+              )}
             >
               <MembershipsDropdownMenu search={search} queryRef={queryRef} />
             </Suspense>

apps/console/src/pages/iam/organizations/_components/MembershipsDropdownMenuItem.tsx

@@ -63,21 +63,21 @@ export function MembershipsDropdownMenuItem(props: {
 
   const navigate = useNavigate();
 
-  const { id, lastSession, organization } =
-    useFragment<MembershipsDropdownMenuItemFragment$key>(fragment, fKey);
+  const { id, lastSession, organization }
+    = useFragment<MembershipsDropdownMenuItemFragment$key>(fragment, fKey);
 
   const isAuthenticated = !!lastSession;
-  const isExpired =
-    lastSession && parseDate(lastSession.expiresAt) < new Date();
+  const isExpired
+    = lastSession && parseDate(lastSession.expiresAt) < new Date();
 
-  const [assumeOrganizationSession] =
-    useMutation<MembershipsDropdownMenuItem_assumeMutation>(
+  const [assumeOrganizationSession]
+    = useMutation<MembershipsDropdownMenuItem_assumeMutation>(
       assumeOrganizationSessionMutation,
     );
 
   const handleAssumeOrganizationSession = useCallback(() => {
     if (isAuthenticated) {
-      navigate(`/organizations/${organization.id}`);
+      void navigate(`/organizations/${organization.id}`);
     } else {
       assumeOrganizationSession({
         variables: {
@@ -94,13 +94,13 @@ export function MembershipsDropdownMenuItem(props: {
 
           switch (result.__typename) {
             case "PasswordRequired":
-              navigate("/auth/login");
+              void navigate("/auth/login");
               break;
             case "SAMLAuthenticationRequired":
               window.location.href = result.redirectUrl;
               break;
             default:
-              navigate(`/organizations/${organization.id}`);
+              void navigate(`/organizations/${organization.id}`);
           }
         },
       });

apps/console/src/pages/iam/organizations/_components/Sidebar.tsx

@@ -1,25 +1,25 @@
 import {
-    IconBank,
-    IconBook,
-    IconBox,
-    IconCalendar1,
-    IconCircleProgress,
-    IconClock,
-    IconCrossLargeX,
-    IconFire3,
-    IconGroup1,
-    IconInboxEmpty,
-    IconListStack,
-    IconLock,
-    IconMedal,
-    IconPageCheck,
-    IconPageTextLine,
-    IconRotateCw,
-    IconSettingsGear2,
-    IconShield,
-    IconStore,
-    IconTodo,
-    SidebarItem,
+  IconBank,
+  IconBook,
+  IconBox,
+  IconCalendar1,
+  IconCircleProgress,
+  IconClock,
+  IconCrossLargeX,
+  IconFire3,
+  IconGroup1,
+  IconInboxEmpty,
+  IconListStack,
+  IconLock,
+  IconMedal,
+  IconPageCheck,
+  IconPageTextLine,
+  IconRotateCw,
+  IconSettingsGear2,
+  IconShield,
+  IconStore,
+  IconTodo,
+  SidebarItem,
 } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
 import { useOrganizationId } from "/hooks/useOrganizationId";
@@ -59,157 +59,157 @@ const fragment = graphql`
 `;
 
 export function Sidebar(props: { fKey: SidebarFragment$key }) {
-    const { fKey } = props;
+  const { fKey } = props;
 
-    const { __ } = useTranslate();
-    const organizationId = useOrganizationId();
+  const { __ } = useTranslate();
+  const organizationId = useOrganizationId();
 
-    const organization = useFragment<SidebarFragment$key>(fragment, fKey);
+  const organization = useFragment<SidebarFragment$key>(fragment, fKey);
 
-    const prefix = `/organizations/${organizationId}`;
+  const prefix = `/organizations/${organizationId}`;
 
-    return (
-        <ul className="space-y-[2px]">
-            {organization.canListMeetings && (
-                <SidebarItem
-                    label={__("Meetings")}
-                    icon={IconCalendar1}
-                    to={`${prefix}/meetings`}
-                />
-            )}
-            {organization.canListTasks && (
-                <SidebarItem
-                    label={__("Tasks")}
-                    icon={IconInboxEmpty}
-                    to={`${prefix}/tasks`}
-                />
-            )}
-            {organization.canListMeasures && (
-                <SidebarItem
-                    label={__("Measures")}
-                    icon={IconTodo}
-                    to={`${prefix}/measures`}
-                />
-            )}
-            {organization.canListRisks && (
-                <SidebarItem
-                    label={__("Risks")}
-                    icon={IconFire3}
-                    to={`${prefix}/risks`}
-                />
-            )}
-            {organization.canListFrameworks && (
-                <SidebarItem
-                    label={__("Frameworks")}
-                    icon={IconBank}
-                    to={`${prefix}/frameworks`}
-                />
-            )}
-            {organization.canListPeople && (
-                <SidebarItem
-                    label={__("People")}
-                    icon={IconGroup1}
-                    to={`${prefix}/people`}
-                />
-            )}
-            {organization.canListVendors && (
-                <SidebarItem
-                    label={__("Vendors")}
-                    icon={IconStore}
-                    to={`${prefix}/vendors`}
-                />
-            )}
-            {organization.canListDocuments && (
-                <SidebarItem
-                    label={__("Documents")}
-                    icon={IconPageTextLine}
-                    to={`${prefix}/documents`}
-                />
-            )}
-            {organization.canListAssets && (
-                <SidebarItem
-                    label={__("Assets")}
-                    icon={IconBox}
-                    to={`${prefix}/assets`}
-                />
-            )}
-            {organization.canListData && (
-                <SidebarItem
-                    label={__("Data")}
-                    icon={IconListStack}
-                    to={`${prefix}/data`}
-                />
-            )}
-            {organization.canListAudits && (
-                <SidebarItem
-                    label={__("Audits")}
-                    icon={IconMedal}
-                    to={`${prefix}/audits`}
-                />
-            )}
-            {organization.canListNonconformities && (
-                <SidebarItem
-                    label={__("Nonconformities")}
-                    icon={IconCrossLargeX}
-                    to={`${prefix}/nonconformities`}
-                />
-            )}
-            {organization.canListObligations && (
-                <SidebarItem
-                    label={__("Obligations")}
-                    icon={IconBook}
-                    to={`${prefix}/obligations`}
-                />
-            )}
-            {organization.canListContinualImprovements && (
-                <SidebarItem
-                    label={__("Continual Improvements")}
-                    icon={IconRotateCw}
-                    to={`${prefix}/continual-improvements`}
-                />
-            )}
-            {organization.canListProcessingActivities && (
-                <SidebarItem
-                    label={__("Processing Activities")}
-                    icon={IconCircleProgress}
-                    to={`${prefix}/processing-activities`}
-                />
-            )}
-            {organization.canListStatesOfApplicability && (
-                <SidebarItem
-                    label={__("States of Applicability")}
-                    icon={IconPageCheck}
-                    to={`${prefix}/states-of-applicability`}
-                />
-            )}
-            {organization.canListRightsRequests && (
-                <SidebarItem
-                    label={__("Rights Requests")}
-                    icon={IconLock}
-                    to={`${prefix}/rights-requests`}
-                />
-            )}
-            {organization.canListSnapshots && (
-                <SidebarItem
-                    label={__("Snapshots")}
-                    icon={IconClock}
-                    to={`${prefix}/snapshots`}
-                />
-            )}
-            {organization.canGetTrustCenter && (
-                <SidebarItem
-                    label={__("Trust Center")}
-                    icon={IconShield}
-                    to={`${prefix}/trust-center`}
-                />
-            )}
-            {organization.canUpdateOrganization && (
-                <SidebarItem
-                    label={__("Settings")}
-                    icon={IconSettingsGear2}
-                    to={`${prefix}/settings`}
-                />
-            )}
-        </ul>
-    );
+  return (
+    <ul className="space-y-[2px]">
+      {organization.canListMeetings && (
+        <SidebarItem
+          label={__("Meetings")}
+          icon={IconCalendar1}
+          to={`${prefix}/meetings`}
+        />
+      )}
+      {organization.canListTasks && (
+        <SidebarItem
+          label={__("Tasks")}
+          icon={IconInboxEmpty}
+          to={`${prefix}/tasks`}
+        />
+      )}
+      {organization.canListMeasures && (
+        <SidebarItem
+          label={__("Measures")}
+          icon={IconTodo}
+          to={`${prefix}/measures`}
+        />
+      )}
+      {organization.canListRisks && (
+        <SidebarItem
+          label={__("Risks")}
+          icon={IconFire3}
+          to={`${prefix}/risks`}
+        />
+      )}
+      {organization.canListFrameworks && (
+        <SidebarItem
+          label={__("Frameworks")}
+          icon={IconBank}
+          to={`${prefix}/frameworks`}
+        />
+      )}
+      {organization.canListPeople && (
+        <SidebarItem
+          label={__("People")}
+          icon={IconGroup1}
+          to={`${prefix}/people`}
+        />
+      )}
+      {organization.canListVendors && (
+        <SidebarItem
+          label={__("Vendors")}
+          icon={IconStore}
+          to={`${prefix}/vendors`}
+        />
+      )}
+      {organization.canListDocuments && (
+        <SidebarItem
+          label={__("Documents")}
+          icon={IconPageTextLine}
+          to={`${prefix}/documents`}
+        />
+      )}
+      {organization.canListAssets && (
+        <SidebarItem
+          label={__("Assets")}
+          icon={IconBox}
+          to={`${prefix}/assets`}
+        />
+      )}
+      {organization.canListData && (
+        <SidebarItem
+          label={__("Data")}
+          icon={IconListStack}
+          to={`${prefix}/data`}
+        />
+      )}
+      {organization.canListAudits && (
+        <SidebarItem
+          label={__("Audits")}
+          icon={IconMedal}
+          to={`${prefix}/audits`}
+        />
+      )}
+      {organization.canListNonconformities && (
+        <SidebarItem
+          label={__("Nonconformities")}
+          icon={IconCrossLargeX}
+          to={`${prefix}/nonconformities`}
+        />
+      )}
+      {organization.canListObligations && (
+        <SidebarItem
+          label={__("Obligations")}
+          icon={IconBook}
+          to={`${prefix}/obligations`}
+        />
+      )}
+      {organization.canListContinualImprovements && (
+        <SidebarItem
+          label={__("Continual Improvements")}
+          icon={IconRotateCw}
+          to={`${prefix}/continual-improvements`}
+        />
+      )}
+      {organization.canListProcessingActivities && (
+        <SidebarItem
+          label={__("Processing Activities")}
+          icon={IconCircleProgress}
+          to={`${prefix}/processing-activities`}
+        />
+      )}
+      {organization.canListStatesOfApplicability && (
+        <SidebarItem
+          label={__("States of Applicability")}
+          icon={IconPageCheck}
+          to={`${prefix}/states-of-applicability`}
+        />
+      )}
+      {organization.canListRightsRequests && (
+        <SidebarItem
+          label={__("Rights Requests")}
+          icon={IconLock}
+          to={`${prefix}/rights-requests`}
+        />
+      )}
+      {organization.canListSnapshots && (
+        <SidebarItem
+          label={__("Snapshots")}
+          icon={IconClock}
+          to={`${prefix}/snapshots`}
+        />
+      )}
+      {organization.canGetTrustCenter && (
+        <SidebarItem
+          label={__("Trust Center")}
+          icon={IconShield}
+          to={`${prefix}/trust-center`}
+        />
+      )}
+      {organization.canUpdateOrganization && (
+        <SidebarItem
+          label={__("Settings")}
+          icon={IconSettingsGear2}
+          to={`${prefix}/settings`}
+        />
+      )}
+    </ul>
+  );
 }

apps/console/src/pages/iam/organizations/settings/GeneralSettingsPage.tsx

@@ -49,8 +49,8 @@ export function GeneralSettingsPage(props: {
     throw new Error("Relay node is not an organization");
   }
 
-  const [deleteOrganization, isDeletingOrganization] =
-    useMutationWithToasts<GeneralSettingsPage_deleteMutation>(
+  const [deleteOrganization, isDeletingOrganization]
+    = useMutationWithToasts<GeneralSettingsPage_deleteMutation>(
       deleteOrganizationMutation,
       {
         successMessage: __("Organization deleted successfully."),
@@ -67,7 +67,7 @@ export function GeneralSettingsPage(props: {
         connections: [],
       },
       onSuccess: () => {
-        navigate("/", { replace: true });
+        void navigate("/", { replace: true });
       },
     });
   };
@@ -87,7 +87,8 @@ export function GeneralSettingsPage(props: {
                 {__("Delete Organization")}
               </h3>
               <p className="text-sm text-txt-tertiary">
-                {__("Permanently delete this organization and all its data.")}{" "}
+                {__("Permanently delete this organization and all its data.")}
+                {" "}
                 <span className="text-red-600 font-medium">
                   {__("This action cannot be undone.")}
                 </span>
@@ -95,7 +96,7 @@ export function GeneralSettingsPage(props: {
             </div>
             <DeleteOrganizationDialog
               organizationName={organization.name}
-              onConfirm={handleDeleteOrganization}
+              onConfirm={() => void handleDeleteOrganization()}
               isDeleting={isDeletingOrganization}
             >
               <Button

apps/console/src/pages/iam/organizations/settings/MembersPageLoader.tsx

@@ -7,8 +7,8 @@ import type { MembersPageQuery } from "/__generated__/iam/MembersPageQuery.graph
 
 function MembersPageLoader() {
   const organizationId = useOrganizationId();
-  const [queryRef, loadQuery] =
-    useQueryLoader<MembersPageQuery>(membersPageQuery);
+  const [queryRef, loadQuery]
+    = useQueryLoader<MembersPageQuery>(membersPageQuery);
 
   useEffect(() => {
     loadQuery({