Style

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/App.tsx

@@ -24,7 +24,7 @@ posthog.init(process.env.POSTHOG_KEY!, {
 });
 
 const OrganizationSelectionPage = lazy(
-  () => import("./pages/OrganizationSelectionPage")
+  () => import("./pages/OrganizationSelectionPage"),
 );
 const HomePage = lazy(() => import("./pages/HomePage"));
 const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
@@ -35,14 +35,14 @@ const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
 const SettingsPage = lazy(() => import("./pages/SettingsPage"));
 const CreatePeoplePage = lazy(() => import("./pages/CreatePeoplePage"));
 const FrameworkOverviewPage = lazy(
-  () => import("./pages/FrameworkOverviewPage")
+  () => import("./pages/FrameworkOverviewPage"),
 );
 const ControlOverviewPage = lazy(() => import("./pages/ControlOverviewPage"));
 const PeopleOverviewPage = lazy(() => import("./pages/PeopleOverviewPage"));
 const LoginPage = lazy(() => import("./pages/LoginPage"));
 const RegisterPage = lazy(() => import("./pages/RegisterPage"));
 const CreateOrganizationPage = lazy(
-  () => import("./pages/CreateOrganizationPage")
+  () => import("./pages/CreateOrganizationPage"),
 );
 const CreateFrameworkPage = lazy(() => import("./pages/CreateFrameworkPage"));
 const CreateControlPage = lazy(() => import("./pages/CreateControlPage"));

apps/console/src/components/OrganizationSwitcher.tsx

@@ -74,7 +74,7 @@ export function OrganizationSwitcher({
   useEffect(() => {
     if (hasOrganizations) {
       const org = data.organizations.edges.find(
-        (edge) => edge.node.id === organizationId
+        (edge) => edge.node.id === organizationId,
       );
       if (org) {
         setCurrentOrganization(org.node);

apps/console/src/components/ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -57,7 +57,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -71,7 +71,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

apps/console/src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<
     <textarea
       className={cn(
         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       ref={ref}
       {...props}

apps/console/src/layouts/ConsoleLayout.tsx

@@ -57,7 +57,7 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
       }
     `,
     { organizationId: organizationId! },
-    { fetchPolicy: "store-or-network" }
+    { fetchPolicy: "store-or-network" },
   );
 
   return (
@@ -117,7 +117,7 @@ function BreadcrumbFrameworkOverview() {
         }
       }
     `,
-    { frameworkId: frameworkId! }
+    { frameworkId: frameworkId! },
   );
 
   return (
@@ -151,7 +151,7 @@ function BreadcrumbUpdateFramework() {
       }
     `,
     { frameworkId: frameworkId! },
-    { fetchPolicy: "store-or-network" }
+    { fetchPolicy: "store-or-network" },
   );
 
   return (
@@ -208,7 +208,7 @@ function BreadcrumbVendorOverview() {
       }
     `,
     { vendorId: vendorId! },
-    { fetchPolicy: "store-or-network" }
+    { fetchPolicy: "store-or-network" },
   );
 
   return (
@@ -268,7 +268,7 @@ function BreadcrumbPeopleOverview() {
       }
     `,
     { peopleId: peopleId! },
-    { fetchPolicy: "store-or-network" }
+    { fetchPolicy: "store-or-network" },
   );
 
   return (
@@ -310,7 +310,7 @@ function BreadcrumbControlOverview() {
         }
       }
     `,
-    { frameworkId: frameworkId!, controlId: controlId! }
+    { frameworkId: frameworkId!, controlId: controlId! },
   );
 
   return (
@@ -351,7 +351,7 @@ function BreadcrumbCreateControl() {
         }
       }
     `,
-    { frameworkId: frameworkId! }
+    { frameworkId: frameworkId! },
   );
 
   return (

apps/console/src/pages/ControlOverviewPage.tsx

@@ -102,12 +102,12 @@ function ControlOverviewPageContent({
 }) {
   const data = usePreloadedQuery<ControlOverviewPageQueryType>(
     controlOverviewPageQuery,
-    queryRef
+    queryRef,
   );
   const { toast } = useToast();
   const [updateTaskState] =
     useMutation<ControlOverviewPageUpdateTaskStateMutationType>(
-      updateTaskStateMutation
+      updateTaskStateMutation,
     );
   const [createTask] =
     useMutation<ControlOverviewPageCreateTaskMutationType>(createTaskMutation);
@@ -466,7 +466,7 @@ function ControlOverviewPageFallback() {
 export default function ControlOverviewPage() {
   const { controlId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<ControlOverviewPageQueryType>(
-    controlOverviewPageQuery
+    controlOverviewPageQuery,
   );
 
   useEffect(() => {

apps/console/src/pages/CreateControlPage.tsx

@@ -71,7 +71,7 @@ function EditableField({
           }
           className={cn(
             "w-full resize-none",
-            required && !value && "border-red-500"
+            required && !value && "border-red-500",
           )}
           placeholder={`Enter ${label.toLowerCase()}`}
           rows={4}
@@ -126,7 +126,7 @@ function CreateControlPageContent() {
 
     const connectionId = ConnectionHandler.getConnectionID(
       frameworkId!,
-      "FrameworkOverviewPage_controls"
+      "FrameworkOverviewPage_controls",
     );
 
     commit({
@@ -155,7 +155,7 @@ function CreateControlPageContent() {
         });
 
         navigate(
-          `/organizations/${organizationId}/frameworks/${frameworkId}/controls/${data.createControl.controlEdge.node.id}`
+          `/organizations/${organizationId}/frameworks/${frameworkId}/controls/${data.createControl.controlEdge.node.id}`,
         );
       },
       onError(error) {
@@ -215,7 +215,7 @@ function CreateControlPageContent() {
                   navigate(
                     `/organizations/${
                       frameworkId?.split(":")[1]
-                    }/frameworks/${frameworkId}`
+                    }/frameworks/${frameworkId}`,
                   )
                 }
               >

apps/console/src/pages/CreateFrameworkPage.tsx

@@ -69,7 +69,7 @@ function EditableField({
           }
           className={cn(
             "w-full resize-none",
-            required && !value && "border-red-500"
+            required && !value && "border-red-500",
           )}
           placeholder={`Enter ${label.toLowerCase()}`}
           rows={4}
@@ -101,7 +101,7 @@ function CreateFrameworkPageContent() {
 
   const [commit, isInFlight] =
     useMutation<CreateFrameworkPageCreateFrameworkMutation>(
-      createFrameworkMutation
+      createFrameworkMutation,
     );
 
   const handleFieldChange = (field: keyof typeof formData, value: unknown) => {
@@ -125,7 +125,7 @@ function CreateFrameworkPageContent() {
 
     const connectionId = ConnectionHandler.getConnectionID(
       organizationId!,
-      "FrameworkListPage_frameworks"
+      "FrameworkListPage_frameworks",
     );
 
     commit({
@@ -153,7 +153,7 @@ function CreateFrameworkPageContent() {
         });
 
         navigate(
-          `/organizations/${organizationId}/frameworks/${data.createFramework.frameworkEdge.node.id}`
+          `/organizations/${organizationId}/frameworks/${data.createFramework.frameworkEdge.node.id}`,
         );
       },
       onError(error) {

apps/console/src/pages/CreateOrganizationPage.tsx

@@ -86,11 +86,11 @@ export default function CreateOrganizationPage() {
   const { toast } = useToast();
   const data = useLazyLoadQuery<CreateOrganizationPageViewerQuery>(
     viewerQuery,
-    {}
+    {},
   );
   const [createOrganization] =
     useMutation<CreateOrganizationPageCreateOrganizationMutation>(
-      createOrganizationMutation
+      createOrganizationMutation,
     );
   const [formData, setFormData] = useState({
     name: "",
@@ -114,7 +114,7 @@ export default function CreateOrganizationPage() {
         connections: [
           ConnectionHandler.getConnectionID(
             data.viewer.id,
-            "OrganizationSwitcher_organizations"
+            "OrganizationSwitcher_organizations",
           ),
         ],
       },

apps/console/src/pages/FrameworkListPage.tsx

@@ -88,7 +88,7 @@ function FrameworkListPageContent({
 }) {
   const data = usePreloadedQuery<FrameworkListPageQueryType>(
     FrameworkListPageQuery,
-    queryRef
+    queryRef,
   );
   const { organizationId } = useParams();
   const frameworks =
@@ -118,7 +118,7 @@ function FrameworkListPageContent({
           <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2">
             {frameworks.map((framework) => {
               const validatedControls = framework.controls.edges.filter(
-                (edge) => edge?.node?.state === "IMPLEMENTED"
+                (edge) => edge?.node?.state === "IMPLEMENTED",
               ).length;
               const totalControls = framework.controls.edges.length;
 
@@ -185,7 +185,7 @@ function FrameworkListPageFallback() {
 
 export default function FrameworkListPage() {
   const [queryRef, loadQuery] = useQueryLoader<FrameworkListPageQueryType>(
-    FrameworkListPageQuery
+    FrameworkListPageQuery,
   );
 
   const { organizationId } = useParams();

apps/console/src/pages/FrameworkOverviewPage.tsx

@@ -57,14 +57,17 @@ function FrameworkOverviewPageContent({
   const { organizationId } = useParams();
 
   // Group controls by their category
-  const controlsByCategory = controls.reduce((acc, control) => {
+  const controlsByCategory = controls.reduce(
-    if (!control?.category) return acc;
+    (acc, control) => {
-    if (!acc[control.category]) {
+      if (!control?.category) return acc;
-      acc[control.category] = [];
+      if (!acc[control.category]) {
-    }
+        acc[control.category] = [];
-    acc[control.category].push(control);
+      }
-    return acc;
+      acc[control.category].push(control);
-  }, {} as Record<string, typeof controls>);
+      return acc;
+    },
+    {} as Record<string, typeof controls>,
+  );
 
   const controlCards = Object.entries(controlsByCategory).map(
     ([category, controls]) => ({
@@ -72,11 +75,11 @@ function FrameworkOverviewPageContent({
       controls,
       completed: controls.filter((c) => c?.state === "IMPLEMENTED").length,
       total: controls.length,
-    })
+    }),
   );
 
   const totalImplemented = controls.filter(
-    (c) => c?.state === "IMPLEMENTED"
+    (c) => c?.state === "IMPLEMENTED",
   ).length;
 
   return (
@@ -207,7 +210,7 @@ function FrameworkOverviewPageContent({
                           onClick={() => {
                             if (control?.id) {
                               navigate(
-                                `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`
+                                `/organizations/${organizationId}/frameworks/${framework.id}/controls/${control.id}`,
                               );
                             }
                           }}
@@ -291,7 +294,7 @@ function FrameworkOverviewPageContent({
               </div>
             </div>
           </div>,
-          document.body
+          document.body,
         )}
     </div>
   );
@@ -325,7 +328,7 @@ function FrameworkOverviewPageFallback() {
 export default function FrameworkOverviewPage() {
   const { frameworkId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<FrameworkOverviewPageQueryType>(
-    FrameworkOverviewPageQuery
+    FrameworkOverviewPageQuery,
   );
 
   useEffect(() => {

apps/console/src/pages/PeopleOverviewPage.tsx

@@ -98,7 +98,7 @@ function PeopleOverviewPageContent({
   });
   const [commit] = useMutation(updatePeopleMutation);
   const [, loadQuery] = useQueryLoader<PeopleOverviewPageQueryType>(
-    peopleOverviewPageQuery
+    peopleOverviewPageQuery,
   );
   const { toast } = useToast();
 
@@ -200,7 +200,7 @@ function PeopleOverviewPageContent({
                     onClick={() => {
                       const newEmails =
                         formData.additionalEmailAddresses.filter(
-                          (_, i) => i !== index
+                          (_, i) => i !== index,
                         );
                       handleFieldChange("additionalEmailAddresses", newEmails);
                     }}
@@ -245,7 +245,7 @@ function PeopleOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.kind === "EMPLOYEE"
                           ? "bg-blue-100 text-blue-900 ring-2 ring-blue-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Employee
@@ -256,7 +256,7 @@ function PeopleOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.kind === "CONTRACTOR"
                           ? "bg-purple-100 text-purple-900 ring-2 ring-purple-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Contractor
@@ -305,7 +305,7 @@ function PeopleOverviewPageFallback() {
 export default function PeopleOverviewPage() {
   const { peopleId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<PeopleOverviewPageQueryType>(
-    peopleOverviewPageQuery
+    peopleOverviewPageQuery,
   );
 
   useEffect(() => {

apps/console/src/pages/UpdateFrameworkPage.tsx

@@ -87,7 +87,7 @@ function EditableField({
           }
           className={cn(
             "w-full resize-none",
-            required && !value && "border-red-500"
+            required && !value && "border-red-500",
           )}
           placeholder={`Enter ${label.toLowerCase()}`}
           rows={4}
@@ -134,7 +134,7 @@ function UpdateFrameworkPageContent({
 
   const [commit, isInFlight] =
     useMutation<UpdateFrameworkPageUpdateFrameworkMutation>(
-      updateFrameworkMutation
+      updateFrameworkMutation,
     );
 
   const handleFieldChange = (field: keyof typeof formData, value: unknown) => {

apps/console/src/pages/VendorOverviewPage.tsx

@@ -127,7 +127,7 @@ function VendorOverviewPageContent({
   });
   const [commit] = useMutation(updateVendorMutation);
   const [, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
-    vendorOverviewPageQuery
+    vendorOverviewPageQuery,
   );
   const { toast } = useToast();
 
@@ -261,7 +261,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "LOW"
                           ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Low
@@ -274,7 +274,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "MEDIUM"
                           ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Medium
@@ -287,7 +287,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.serviceCriticality === "HIGH"
                           ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       High
@@ -315,7 +315,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "CRITICAL"
                           ? "bg-red-100 text-red-900 ring-2 ring-red-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Critical
@@ -328,7 +328,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "SIGNIFICANT"
                           ? "bg-yellow-100 text-yellow-900 ring-2 ring-yellow-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       Significant
@@ -339,7 +339,7 @@ function VendorOverviewPageContent({
                         "rounded-full px-4 py-1 text-sm transition-colors",
                         formData.riskTier === "GENERAL"
                           ? "bg-green-100 text-green-900 ring-2 ring-green-600 ring-offset-2"
-                          : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                          : "bg-gray-100 text-gray-900 hover:bg-gray-200",
                       )}
                     >
                       General
@@ -420,7 +420,7 @@ function VendorOverviewPageFallback() {
 export default function VendorOverviewPage() {
   const { vendorId } = useParams();
   const [queryRef, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
-    vendorOverviewPageQuery
+    vendorOverviewPageQuery,
   );
 
   useEffect(() => {