rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-19 14:18:14 +01:00
parent 026d939fb1
commit ef774ce6d3
8 changed files with 283 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/console/src/components/ui/toast.tsx
View File

@@ -1,11 +1,11 @@
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"
import * as React from "react";
import * as ToastPrimitives from "@radix-ui/react-toast";
import { cva, type VariantProps } from "class-variance-authority";
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,
}
};

10
apps/console/src/components/ui/toaster.tsx
View File

@@ -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>
)
);
}

131
apps/console/src/hooks/use-toast.ts
View File

@@ -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 {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"
import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000
const TOAST_LIMIT = 1;
const TOAST_REMOVE_DELAY = 1000000;
type ToasterToast = ToastProps & {
id: string
title?: React.ReactNode
description?: React.ReactNode
action?: ToastActionElement
}
id: string;
title?: React.ReactNode;
description?: React.ReactNode;
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
return count.toString()
count = (count + 1) % Number.MAX_SAFE_INTEGER;
return count.toString();
}
type ActionType = typeof actionTypes
type ActionType = typeof actionTypes;
type Action =
| {
type: ActionType["ADD_TOAST"]
toast: ToasterToast
type: ActionType["ADD_TOAST"];
toast: ToasterToast;
}
| {
type: ActionType["UPDATE_TOAST"]
toast: Partial<ToasterToast>
type: ActionType["UPDATE_TOAST"];
toast: Partial<ToasterToast>;
}
| {
type: ActionType["DISMISS_TOAST"]
toastId?: ToasterToast["id"]
type: ActionType["DISMISS_TOAST"];
toastId?: ToasterToast["id"];
}
| {
type: ActionType["REMOVE_TOAST"]
toastId?: ToasterToast["id"]
}
type: ActionType["REMOVE_TOAST"];
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 };

73
apps/console/src/pages/CreatePeoplePage.tsx
View File

@@ -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: '',
primaryEmailAddress: '',
fullName: "",
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);
handleFieldChange('additionalEmailAddresses', newEmails);
const 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
type="button"
variant="outline"
onClick={() => navigate(-1)}
>
<Button type="button" variant="outline" onClick={() => navigate(-1)}>
Cancel
</Button>
<Button

16
apps/console/src/pages/FrameworkListPage.tsx
View File

@@ -55,10 +55,8 @@ function FrameworkCard({
return (
<Card className="relative overflow-hidden border bg-card p-6">
<div className="flex flex-col gap-4">
<div className="size-16">
{icon}
</div>
<div className="size-16">{icon}</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<h3 className="font-semibold">{title}</h3>
@@ -100,10 +98,10 @@ 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;
return (
<Link key={framework.id} to={`/frameworks/${framework.id}`}>
<FrameworkCard
@@ -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"

3
apps/console/src/pages/PeopleListPage.tsx
View File

@@ -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 (

66
apps/console/src/pages/PeopleOverviewPage.tsx
View File

@@ -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 || '',
primaryEmailAddress: data.node.primaryEmailAddress || '',
fullName: data.node.fullName || "",
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 || '',
primaryEmailAddress: data.node.primaryEmailAddress || '',
fullName: data.node.fullName || "",
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);
handleFieldChange('additionalEmailAddresses', newEmails);
const 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
@@ -234,24 +245,24 @@ function PeopleOverviewPageContent({
<Label className="text-sm">Kind</Label>
</div>
<div className="flex gap-2">
<button
onClick={() => handleFieldChange('kind', 'EMPLOYEE')}
<button
onClick={() => handleFieldChange("kind", "EMPLOYEE")}
className={cn(
"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"
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",
)}
>
Employee
</button>
<button
onClick={() => handleFieldChange('kind', 'CONTRACTOR')}
<button
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,13 +277,10 @@ function PeopleOverviewPageContent({
{hasChanges && (
<div className="fixed bottom-6 right-6 flex gap-2">
<Button
variant="outline"
onClick={handleCancel}
>
<Button variant="outline" onClick={handleCancel}>
Cancel
</Button>
<Button
<Button
onClick={handleSave}
className="bg-primary text-primary-foreground hover:bg-primary/90"
>

167
apps/console/src/pages/VendorOverviewPage.tsx
View File

@@ -46,18 +46,18 @@ const vendorOverviewPageQuery = graphql`
const updateVendorMutation = graphql`
mutation VendorOverviewPageUpdateVendorMutation($input: UpdateVendorInput!) {
updateVendor(input: $input) {
id
name
description
serviceStartAt
serviceTerminationAt
serviceCriticality
riskTier
statusPageUrl
termsOfServiceUrl
privacyPolicyUrl
updatedAt
version
id
name
description
serviceStartAt
serviceTerminationAt
serviceCriticality
riskTier
statusPageUrl
termsOfServiceUrl
privacyPolicyUrl
updatedAt
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 || '',
description: data.node.description || '',
name: data.node.name || "",
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 || '',
termsOfServiceUrl: data.node.termsOfServiceUrl || '',
privacyPolicyUrl: data.node.privacyPolicyUrl || '',
statusPageUrl: data.node.statusPageUrl || "",
termsOfServiceUrl: data.node.termsOfServiceUrl || "",
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 || '',
description: data.node.description || '',
name: data.node.name || "",
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 || '',
termsOfServiceUrl: data.node.termsOfServiceUrl || '',
privacyPolicyUrl: data.node.privacyPolicyUrl || '',
statusPageUrl: data.node.statusPageUrl || "",
termsOfServiceUrl: data.node.termsOfServiceUrl || "",
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">
@@ -255,46 +263,52 @@ function VendorOverviewPageContent({
<Label className="text-sm">Service Criticality</Label>
</div>
<div className="flex gap-2">
<button
onClick={() => handleFieldChange('serviceCriticality', 'LOW')}
<button
onClick={() =>
handleFieldChange("serviceCriticality", "LOW")
}
className={cn(
"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"
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",
)}
>
Low
</button>
<button
onClick={() => handleFieldChange('serviceCriticality', 'MEDIUM')}
<button
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')}
<button
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>
@@ -305,46 +319,48 @@ function VendorOverviewPageContent({
<Label className="text-sm">Risk Tier</Label>
</div>
<div className="flex gap-2">
<button
onClick={() => handleFieldChange('riskTier', 'CRITICAL')}
<button
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')}
<button
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')}
<button
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,13 +396,10 @@ function VendorOverviewPageContent({
{hasChanges && (
<div className="fixed bottom-6 right-6 flex gap-2">
<Button
variant="outline"
onClick={handleCancel}
>
<Button variant="outline" onClick={handleCancel}>
Cancel
</Button>
<Button
<Button
onClick={handleSave}
className="bg-primary text-primary-foreground hover:bg-primary/90"
>