Style

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

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

@@ -1,11 +1,11 @@
-import * as React from "react"
+import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast"
+import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority"
+import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react"
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -15,12 +15,12 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -35,8 +35,8 @@ const toastVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
+  },
-)
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -49,9 +49,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
-})
+});
-Toast.displayName = ToastPrimitives.Root.displayName
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -61,12 +61,12 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
-ToastAction.displayName = ToastPrimitives.Action.displayName
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -76,15 +76,15 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
+));
-ToastClose.displayName = ToastPrimitives.Close.displayName
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -95,8 +95,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
     {...props}
   />
-))
+));
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -107,12 +107,12 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
+));
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -124,4 +124,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};

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

@@ -1,4 +1,4 @@
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast";
 import {
   Toast,
   ToastClose,
@@ -6,10 +6,10 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
+} from "@/components/ui/toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -25,9 +25,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }

apps/console/src/hooks/use-toast.ts

@@ -1,78 +1,75 @@
-"use client"
+"use client";
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
 
-import type {
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
 
-const TOAST_LIMIT = 1
+const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
+  id: string;
-  title?: React.ReactNode
+  title?: React.ReactNode;
-  description?: React.ReactNode
+  description?: React.ReactNode;
-  action?: ToastActionElement
+  action?: ToastActionElement;
-}
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString()
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
+      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
+      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
+      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"]
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
+      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"]
+      toastId?: ToasterToast["id"];
-    }
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
+    });
-  }, TOAST_REMOVE_DELAY)
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
+  toastTimeouts.set(toastId, timeout);
-}
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -80,27 +77,27 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
-      }
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
+          addToRemoveQueue(toast.id);
-        })
+        });
       }
 
       return {
@@ -111,46 +108,46 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
+    listener(memoryState);
-  })
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
+    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -159,36 +156,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
+    };
-  }, [state])
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };

apps/console/src/pages/CreatePeoplePage.tsx

@@ -32,7 +32,10 @@ const createPeoplePageQuery = graphql`
 `;
 
 const createPeopleMutation = graphql`
-  mutation CreatePeoplePageCreatePeopleMutation($input: CreatePeopleInput!, $connections: [ID!]!) {
+  mutation CreatePeoplePageCreatePeopleMutation(
+    $input: CreatePeopleInput!
+    $connections: [ID!]!
+  ) {
     createPeople(input: $input) {
       peopleEdge @prependEdge(connections: $connections) {
         node {
@@ -89,17 +92,18 @@ function CreatePeoplePageContent({
   const navigate = useNavigate();
   const environment = useRelayEnvironment();
   const data = usePreloadedQuery(createPeoplePageQuery, queryRef);
-  const [createPeople] = useMutation<CreatePeoplePageCreatePeopleMutation>(createPeopleMutation);
+  const [createPeople] =
+    useMutation<CreatePeoplePageCreatePeopleMutation>(createPeopleMutation);
   const { toast } = useToast();
   const [formData, setFormData] = useState({
-    fullName: '',
+    fullName: "",
-    primaryEmailAddress: '',
+    primaryEmailAddress: "",
     additionalEmailAddresses: [] as string[],
-    kind: 'EMPLOYEE' as 'EMPLOYEE' | 'CONTRACTOR',
+    kind: "EMPLOYEE" as "EMPLOYEE" | "CONTRACTOR",
   });
 
   const handleFieldChange = (field: keyof typeof formData, value: any) => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       [field]: value,
     }));
@@ -107,7 +111,10 @@ function CreatePeoplePageContent({
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    const peopleConnectionId = ConnectionHandler.getConnectionID(data.currentOrganization.id, "PeopleListPage_peoples");
+    const peopleConnectionId = ConnectionHandler.getConnectionID(
+      data.currentOrganization.id,
+      "PeopleListPage_peoples",
+    );
 
     createPeople({
       variables: {
@@ -150,7 +157,7 @@ function CreatePeoplePageContent({
             <EditableField
               label="Full Name"
               value={formData.fullName}
-              onChange={(value) => handleFieldChange('fullName', value)}
+              onChange={(value) => handleFieldChange("fullName", value)}
               required
             />
 
@@ -158,7 +165,9 @@ function CreatePeoplePageContent({
               label="Primary Email"
               value={formData.primaryEmailAddress}
               type="email"
-              onChange={(value) => handleFieldChange('primaryEmailAddress', value)}
+              onChange={(value) =>
+                handleFieldChange("primaryEmailAddress", value)
+              }
               required
             />
 
@@ -174,17 +183,28 @@ function CreatePeoplePageContent({
                       type="email"
                       value={email}
                       onChange={(e) => {
-                        const newEmails = [...formData.additionalEmailAddresses];
+                        const newEmails = [
+                          ...formData.additionalEmailAddresses,
+                        ];
                         newEmails[index] = e.target.value;
-                        handleFieldChange('additionalEmailAddresses', newEmails);
+                        handleFieldChange(
+                          "additionalEmailAddresses",
+                          newEmails,
+                        );
                       }}
                     />
                     <Button
                       type="button"
                       variant="outline"
                       onClick={() => {
-                        const newEmails = formData.additionalEmailAddresses.filter((_, i) => i !== index);
+                        const newEmails =
-                        handleFieldChange('additionalEmailAddresses', newEmails);
+                          formData.additionalEmailAddresses.filter(
+                            (_, i) => i !== index,
+                          );
+                        handleFieldChange(
+                          "additionalEmailAddresses",
+                          newEmails,
+                        );
                       }}
                     >
                       Remove
@@ -195,7 +215,10 @@ function CreatePeoplePageContent({
                   type="button"
                   variant="outline"
                   onClick={() => {
-                    handleFieldChange('additionalEmailAddresses', [...formData.additionalEmailAddresses, '']);
+                    handleFieldChange("additionalEmailAddresses", [
+                      ...formData.additionalEmailAddresses,
+                      "",
+                    ]);
                   }}
                 >
                   Add Email
@@ -206,7 +229,9 @@ function CreatePeoplePageContent({
             <Card className="p-6">
               <div className="space-y-4">
                 <div className="space-y-2">
-                  <h2 className="text-lg font-medium">Additional Information</h2>
+                  <h2 className="text-lg font-medium">
+                    Additional Information
+                  </h2>
                   <p className="text-sm text-gray-500">
                     Additional details about the person
                   </p>
@@ -221,24 +246,24 @@ function CreatePeoplePageContent({
                     <div className="flex gap-2">
                       <button
                         type="button"
-                        onClick={() => handleFieldChange('kind', 'EMPLOYEE')}
+                        onClick={() => handleFieldChange("kind", "EMPLOYEE")}
                         className={cn(
                           "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === 'EMPLOYEE'
+                          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
                       </button>
                       <button
                         type="button"
-                        onClick={() => handleFieldChange('kind', 'CONTRACTOR')}
+                        onClick={() => handleFieldChange("kind", "CONTRACTOR")}
                         className={cn(
                           "rounded-full px-4 py-1 text-sm transition-colors",
-                          formData.kind === 'CONTRACTOR'
+                          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
@@ -251,11 +276,7 @@ function CreatePeoplePageContent({
           </div>
         </div>
         <div className="fixed bottom-6 right-6 flex gap-2">
-          <Button
+          <Button type="button" variant="outline" onClick={() => navigate(-1)}>
-            type="button"
-            variant="outline"
-            onClick={() => navigate(-1)}
-          >
             Cancel
           </Button>
           <Button

apps/console/src/pages/FrameworkListPage.tsx

@@ -55,9 +55,7 @@ function FrameworkCard({
   return (
     <Card className="relative overflow-hidden border bg-card p-6">
       <div className="flex flex-col gap-4">
-        <div className="size-16">
+        <div className="size-16">{icon}</div>
-          {icon}
-        </div>
 
         <div className="space-y-2">
           <div className="flex items-center gap-2">
@@ -100,7 +98,7 @@ function FrameworkListPageContent({
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         {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;
 
@@ -112,11 +110,13 @@ function FrameworkListPageContent({
                 icon={
                   <div className="flex size-full items-center justify-center rounded-full bg-blue-100">
                     <span className="text-lg font-semibold text-blue-900">
-                      {framework.name.split(' ')[0]}
+                      {framework.name.split(" ")[0]}
                     </span>
                   </div>
                 }
-                status={validatedControls === totalControls ? "Compliant" : undefined}
+                status={
+                  validatedControls === totalControls ? "Compliant" : undefined
+                }
                 progress={
                   validatedControls === totalControls
                     ? "All controls validated"

apps/console/src/pages/PeopleListPage.tsx

@@ -147,7 +147,8 @@ function PeopleListContent({
     PeopleListPage_peoples$key
   >(peopleListFragment, data.currentOrganization);
 
-  const peoples = peoplesConnection.peoples.edges.map((edge) => edge.node) ?? [];
+  const peoples =
+    peoplesConnection.peoples.edges.map((edge) => edge.node) ?? [];
   const pageInfo = peoplesConnection.peoples.pageInfo;
 
   return (

apps/console/src/pages/PeopleOverviewPage.tsx

@@ -91,13 +91,15 @@ function PeopleOverviewPageContent({
   const { setBreadcrumbSegment } = useBreadcrumb();
   const [editedFields, setEditedFields] = useState<Set<string>>(new Set());
   const [formData, setFormData] = useState({
-    fullName: data.node.fullName || '',
+    fullName: data.node.fullName || "",
-    primaryEmailAddress: data.node.primaryEmailAddress || '',
+    primaryEmailAddress: data.node.primaryEmailAddress || "",
     additionalEmailAddresses: data.node.additionalEmailAddresses || [],
     kind: data.node.kind,
   });
   const [commit] = useMutation(updatePeopleMutation);
-  const [_, loadQuery] = useQueryLoader<PeopleOverviewPageQueryType>(peopleOverviewPageQuery);
+  const [_, loadQuery] = useQueryLoader<PeopleOverviewPageQueryType>(
+    peopleOverviewPageQuery,
+  );
   const { toast } = useToast();
 
   const hasChanges = editedFields.size > 0;
@@ -120,10 +122,11 @@ function PeopleOverviewPageContent({
         setEditedFields(new Set());
       },
       onError: (error) => {
-        if (error.message?.includes('concurrent modification')) {
+        if (error.message?.includes("concurrent modification")) {
           toast({
             title: "Error",
-            description: "Someone else modified this person. Reloading latest data.",
+            description:
+              "Someone else modified this person. Reloading latest data.",
             variant: "destructive",
           });
           loadQuery({ peopleId: data.node.id! });
@@ -139,17 +142,17 @@ function PeopleOverviewPageContent({
   }, [commit, data.node.id, data.node.version, formData, loadQuery, toast]);
 
   const handleFieldChange = (field: keyof typeof formData, value: any) => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       [field]: value,
     }));
-    setEditedFields(prev => new Set(prev).add(field));
+    setEditedFields((prev) => new Set(prev).add(field));
   };
 
   const handleCancel = () => {
     setFormData({
-      fullName: data.node.fullName || '',
+      fullName: data.node.fullName || "",
-      primaryEmailAddress: data.node.primaryEmailAddress || '',
+      primaryEmailAddress: data.node.primaryEmailAddress || "",
       additionalEmailAddresses: data.node.additionalEmailAddresses || [],
       kind: data.node.kind,
     });
@@ -169,14 +172,16 @@ function PeopleOverviewPageContent({
           <EditableField
             label="Full Name"
             value={formData.fullName}
-            onChange={(value) => handleFieldChange('fullName', value)}
+            onChange={(value) => handleFieldChange("fullName", value)}
           />
 
           <EditableField
             label="Primary Email"
             value={formData.primaryEmailAddress}
             type="email"
-            onChange={(value) => handleFieldChange('primaryEmailAddress', value)}
+            onChange={(value) =>
+              handleFieldChange("primaryEmailAddress", value)
+            }
           />
 
           <div className="space-y-2">
@@ -193,14 +198,17 @@ function PeopleOverviewPageContent({
                     onChange={(e) => {
                       const newEmails = [...formData.additionalEmailAddresses];
                       newEmails[index] = e.target.value;
-                      handleFieldChange('additionalEmailAddresses', newEmails);
+                      handleFieldChange("additionalEmailAddresses", newEmails);
                     }}
                   />
                   <Button
                     variant="outline"
                     onClick={() => {
-                      const newEmails = formData.additionalEmailAddresses.filter((_, i) => i !== index);
+                      const newEmails =
-                      handleFieldChange('additionalEmailAddresses', newEmails);
+                        formData.additionalEmailAddresses.filter(
+                          (_, i) => i !== index,
+                        );
+                      handleFieldChange("additionalEmailAddresses", newEmails);
                     }}
                   >
                     Remove
@@ -210,7 +218,10 @@ function PeopleOverviewPageContent({
               <Button
                 variant="outline"
                 onClick={() => {
-                  handleFieldChange('additionalEmailAddresses', [...formData.additionalEmailAddresses, '']);
+                  handleFieldChange("additionalEmailAddresses", [
+                    ...formData.additionalEmailAddresses,
+                    "",
+                  ]);
                 }}
               >
                 Add Email
@@ -235,23 +246,23 @@ function PeopleOverviewPageContent({
                   </div>
                   <div className="flex gap-2">
                     <button
-                      onClick={() => handleFieldChange('kind', 'EMPLOYEE')}
+                      onClick={() => handleFieldChange("kind", "EMPLOYEE")}
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.kind === 'EMPLOYEE'
+                        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
                     </button>
                     <button
-                      onClick={() => handleFieldChange('kind', 'CONTRACTOR')}
+                      onClick={() => handleFieldChange("kind", "CONTRACTOR")}
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.kind === 'CONTRACTOR'
+                        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
@@ -266,10 +277,7 @@ function PeopleOverviewPageContent({
 
       {hasChanges && (
         <div className="fixed bottom-6 right-6 flex gap-2">
-          <Button
+          <Button variant="outline" onClick={handleCancel}>
-            variant="outline"
-            onClick={handleCancel}
-          >
             Cancel
           </Button>
           <Button

apps/console/src/pages/VendorOverviewPage.tsx

@@ -46,18 +46,18 @@ const vendorOverviewPageQuery = graphql`
 const updateVendorMutation = graphql`
   mutation VendorOverviewPageUpdateVendorMutation($input: UpdateVendorInput!) {
     updateVendor(input: $input) {
-        id
+      id
-        name
+      name
-        description
+      description
-        serviceStartAt
+      serviceStartAt
-        serviceTerminationAt
+      serviceTerminationAt
-        serviceCriticality
+      serviceCriticality
-        riskTier
+      riskTier
-        statusPageUrl
+      statusPageUrl
-        termsOfServiceUrl
+      termsOfServiceUrl
-        privacyPolicyUrl
+      privacyPolicyUrl
-        updatedAt
+      updatedAt
-        version
+      version
     }
   }
 `;
@@ -95,13 +95,13 @@ function EditableField({
 
 // Format date for input field (YYYY-MM-DDTHH:mm)
 function formatDateForInput(date: string | null | undefined): string {
-  if (!date) return '';
+  if (!date) return "";
   return new Date(date).toISOString().slice(0, 16);
 }
 
 // Format date for API (2006-01-02T15:04:05.999999999Z07:00)
 function formatDateForAPI(dateStr: string): string {
-  if (!dateStr) return '';
+  if (!dateStr) return "";
   const date = new Date(dateStr);
   return date.toISOString();
 }
@@ -115,19 +115,21 @@ function VendorOverviewPageContent({
   const { setBreadcrumbSegment } = useBreadcrumb();
   const [editedFields, setEditedFields] = useState<Set<string>>(new Set());
   const [formData, setFormData] = useState({
-    name: data.node.name || '',
+    name: data.node.name || "",
-    description: data.node.description || '',
+    description: data.node.description || "",
     // Format dates properly for datetime-local input
     serviceStartAt: formatDateForInput(data.node.serviceStartAt),
     serviceTerminationAt: formatDateForInput(data.node.serviceTerminationAt),
     serviceCriticality: data.node.serviceCriticality,
     riskTier: data.node.riskTier,
-    statusPageUrl: data.node.statusPageUrl || '',
+    statusPageUrl: data.node.statusPageUrl || "",
-    termsOfServiceUrl: data.node.termsOfServiceUrl || '',
+    termsOfServiceUrl: data.node.termsOfServiceUrl || "",
-    privacyPolicyUrl: data.node.privacyPolicyUrl || '',
+    privacyPolicyUrl: data.node.privacyPolicyUrl || "",
   });
   const [commit] = useMutation(updateVendorMutation);
-  const [_, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(vendorOverviewPageQuery);
+  const [_, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(
+    vendorOverviewPageQuery,
+  );
   const { toast } = useToast();
 
   const hasChanges = editedFields.size > 0;
@@ -136,7 +138,9 @@ function VendorOverviewPageContent({
     const formattedData = {
       ...formData,
       serviceStartAt: formatDateForAPI(formData.serviceStartAt),
-      serviceTerminationAt: formData.serviceTerminationAt ? formatDateForAPI(formData.serviceTerminationAt) : null,
+      serviceTerminationAt: formData.serviceTerminationAt
+        ? formatDateForAPI(formData.serviceTerminationAt)
+        : null,
     };
 
     commit({
@@ -156,15 +160,15 @@ function VendorOverviewPageContent({
         setEditedFields(new Set());
       },
       onError: (error) => {
-        if (error.message?.includes('concurrent modification')) {
+        if (error.message?.includes("concurrent modification")) {
           toast({
             title: "Error",
-            description: "Someone else modified this vendor. Reloading latest data.",
+            description:
+              "Someone else modified this vendor. Reloading latest data.",
             variant: "destructive",
           });
 
           loadQuery({ vendorId: data.node.id! });
-
         } else {
           toast({
             title: "Error",
@@ -180,25 +184,25 @@ function VendorOverviewPageContent({
   }, [commit, data.node.id, data.node.version, formData, loadQuery, toast]);
 
   const handleFieldChange = (field: keyof typeof formData, value: any) => {
-    setFormData(prev => ({
+    setFormData((prev) => ({
       ...prev,
       [field]: value,
     }));
-    setEditedFields(prev => new Set(prev).add(field));
+    setEditedFields((prev) => new Set(prev).add(field));
   };
 
   // Update the cancel handler to also format dates
   const handleCancel = () => {
     setFormData({
-      name: data.node.name || '',
+      name: data.node.name || "",
-      description: data.node.description || '',
+      description: data.node.description || "",
       serviceStartAt: formatDateForInput(data.node.serviceStartAt),
       serviceTerminationAt: formatDateForInput(data.node.serviceTerminationAt),
       serviceCriticality: data.node.serviceCriticality,
       riskTier: data.node.riskTier,
-      statusPageUrl: data.node.statusPageUrl || '',
+      statusPageUrl: data.node.statusPageUrl || "",
-      termsOfServiceUrl: data.node.termsOfServiceUrl || '',
+      termsOfServiceUrl: data.node.termsOfServiceUrl || "",
-      privacyPolicyUrl: data.node.privacyPolicyUrl || '',
+      privacyPolicyUrl: data.node.privacyPolicyUrl || "",
     });
     setEditedFields(new Set());
   };
@@ -216,13 +220,13 @@ function VendorOverviewPageContent({
           <EditableField
             label="Name"
             value={formData.name}
-            onChange={(value) => handleFieldChange('name', value)}
+            onChange={(value) => handleFieldChange("name", value)}
           />
 
           <EditableField
             label="Description"
             value={formData.description}
-            onChange={(value) => handleFieldChange('description', value)}
+            onChange={(value) => handleFieldChange("description", value)}
           />
 
           <Card className="p-6">
@@ -239,14 +243,18 @@ function VendorOverviewPageContent({
                   label="Service Start At"
                   value={formData.serviceStartAt}
                   type="datetime-local"
-                  onChange={(value) => handleFieldChange('serviceStartAt', value)}
+                  onChange={(value) =>
+                    handleFieldChange("serviceStartAt", value)
+                  }
                 />
 
                 <EditableField
                   label="Service Termination At"
                   value={formData.serviceTerminationAt}
                   type="datetime-local"
-                  onChange={(value) => handleFieldChange('serviceTerminationAt', value)}
+                  onChange={(value) =>
+                    handleFieldChange("serviceTerminationAt", value)
+                  }
                 />
 
                 <div className="space-y-2">
@@ -256,45 +264,51 @@ function VendorOverviewPageContent({
                   </div>
                   <div className="flex gap-2">
                     <button
-                      onClick={() => handleFieldChange('serviceCriticality', 'LOW')}
+                      onClick={() =>
+                        handleFieldChange("serviceCriticality", "LOW")
+                      }
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === 'LOW'
+                        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
                     </button>
                     <button
-                      onClick={() => handleFieldChange('serviceCriticality', 'MEDIUM')}
+                      onClick={() =>
+                        handleFieldChange("serviceCriticality", "MEDIUM")
+                      }
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === 'MEDIUM'
+                        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
                     </button>
                     <button
-                      onClick={() => handleFieldChange('serviceCriticality', 'HIGH')}
+                      onClick={() =>
+                        handleFieldChange("serviceCriticality", "HIGH")
+                      }
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.serviceCriticality === 'HIGH'
+                        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
                     </button>
                   </div>
                   <p className="text-sm text-gray-500">
-                    {formData.serviceCriticality === 'HIGH' && 
+                    {formData.serviceCriticality === "HIGH" &&
                       "Critical service - downtime severely impacts end-users"}
-                    {formData.serviceCriticality === 'MEDIUM' && 
+                    {formData.serviceCriticality === "MEDIUM" &&
                       "Important service - downtime moderately affects end-users"}
-                    {formData.serviceCriticality === 'LOW' && 
+                    {formData.serviceCriticality === "LOW" &&
                       "Non-critical service - minimal end-user impact if down"}
                   </p>
                 </div>
@@ -306,45 +320,47 @@ function VendorOverviewPageContent({
                   </div>
                   <div className="flex gap-2">
                     <button
-                      onClick={() => handleFieldChange('riskTier', 'CRITICAL')}
+                      onClick={() => handleFieldChange("riskTier", "CRITICAL")}
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === 'CRITICAL'
+                        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
                     </button>
                     <button
-                      onClick={() => handleFieldChange('riskTier', 'SIGNIFICANT')}
+                      onClick={() =>
+                        handleFieldChange("riskTier", "SIGNIFICANT")
+                      }
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === 'SIGNIFICANT'
+                        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
                     </button>
                     <button
-                      onClick={() => handleFieldChange('riskTier', 'GENERAL')}
+                      onClick={() => handleFieldChange("riskTier", "GENERAL")}
                       className={cn(
                         "rounded-full px-4 py-1 text-sm transition-colors",
-                        formData.riskTier === 'GENERAL'
+                        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
                     </button>
                   </div>
                   <p className="text-sm text-gray-500">
-                    {formData.riskTier === 'CRITICAL' && 
+                    {formData.riskTier === "CRITICAL" &&
                       "Handles sensitive data, critical for platform operation"}
-                    {formData.riskTier === 'SIGNIFICANT' && 
+                    {formData.riskTier === "SIGNIFICANT" &&
                       "No user data access, but important for platform management"}
-                    {formData.riskTier === 'GENERAL' && 
+                    {formData.riskTier === "GENERAL" &&
                       "General vendor with minimal risk"}
                   </p>
                 </div>
@@ -352,19 +368,25 @@ function VendorOverviewPageContent({
                 <EditableField
                   label="Status Page URL"
                   value={formData.statusPageUrl || ""}
-                  onChange={(value) => handleFieldChange('statusPageUrl', value)}
+                  onChange={(value) =>
+                    handleFieldChange("statusPageUrl", value)
+                  }
                 />
 
                 <EditableField
                   label="Terms of Service URL"
                   value={formData.termsOfServiceUrl || ""}
-                  onChange={(value) => handleFieldChange('termsOfServiceUrl', value)}
+                  onChange={(value) =>
+                    handleFieldChange("termsOfServiceUrl", value)
+                  }
                 />
 
                 <EditableField
                   label="Privacy Policy URL"
                   value={formData.privacyPolicyUrl || ""}
-                  onChange={(value) => handleFieldChange('privacyPolicyUrl', value)}
+                  onChange={(value) =>
+                    handleFieldChange("privacyPolicyUrl", value)
+                  }
                 />
               </div>
             </div>
@@ -374,10 +396,7 @@ function VendorOverviewPageContent({
 
       {hasChanges && (
         <div className="fixed bottom-6 right-6 flex gap-2">
-          <Button
+          <Button variant="outline" onClick={handleCancel}>
-            variant="outline"
-            onClick={handleCancel}
-          >
             Cancel
           </Button>
           <Button