@@ -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"));
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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}`,
|
||||
)
|
||||
}
|
||||
>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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",
|
||||
),
|
||||
],
|
||||
},
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -57,14 +57,17 @@ function FrameworkOverviewPageContent({
|
||||
const { organizationId } = useParams();
|
||||
|
||||
// Group controls by their category
|
||||
const controlsByCategory = controls.reduce((acc, control) => {
|
||||
if (!control?.category) return acc;
|
||||
if (!acc[control.category]) {
|
||||
acc[control.category] = [];
|
||||
}
|
||||
acc[control.category].push(control);
|
||||
return acc;
|
||||
}, {} as Record<string, typeof controls>);
|
||||
const controlsByCategory = controls.reduce(
|
||||
(acc, control) => {
|
||||
if (!control?.category) return acc;
|
||||
if (!acc[control.category]) {
|
||||
acc[control.category] = [];
|
||||
}
|
||||
acc[control.category].push(control);
|
||||
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(() => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
Reference in New Issue
Block a user