Add compliance registries

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2025-08-18 14:57:53 +02:00
parent cb8dc0340e
commit 0262bd1c3d
30 changed files with 7967 additions and 6 deletions

View File

@@ -0,0 +1,264 @@
import {
Button,
IconPlusLarge,
PageHeader,
Card,
Thead,
Tbody,
Tr,
Th,
Td,
Badge,
ActionDropdown,
DropdownItem,
IconTrashCan,
Table,
useConfirm,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { usePageTitle } from "@probo/hooks";
import {
graphql,
usePaginationFragment,
usePreloadedQuery,
useMutation,
type PreloadedQuery,
} from "react-relay";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { CreateComplianceRegistryDialog } from "./dialogs/CreateComplianceRegistryDialog";
import { deleteComplianceRegistryMutation } from "../../../hooks/graph/ComplianceRegistryGraph";
import { sprintf, promisifyMutation, getStatusVariant, getStatusLabel } from "@probo/helpers";
import type { ComplianceRegistriesPageQuery } from "./__generated__/ComplianceRegistriesPageQuery.graphql";
import type {
ComplianceRegistriesPageFragment$key,
ComplianceRegistriesPageFragment$data,
} from "./__generated__/ComplianceRegistriesPageFragment.graphql";
type ComplianceRegistry = ComplianceRegistriesPageFragment$data['complianceRegistries']['edges'][number]['node'];
interface ComplianceRegistriesPageProps {
queryRef: PreloadedQuery<ComplianceRegistriesPageQuery>;
}
const complianceRegistriesPageFragment = graphql`
fragment ComplianceRegistriesPageFragment on Organization
@refetchable(queryName: "ComplianceRegistriesPageRefetchQuery")
@argumentDefinitions(
first: { type: "Int", defaultValue: 10 }
after: { type: "CursorKey" }
) {
id
complianceRegistries(first: $first, after: $after)
@connection(key: "ComplianceRegistriesPage_complianceRegistries") {
__id
totalCount
edges {
node {
id
referenceId
area
source
requirement
status
lastReviewDate
dueDate
actionsToBeImplemented
regulator
audit {
id
name
framework {
id
name
}
}
owner {
id
fullName
}
createdAt
updatedAt
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`;
export default function ComplianceRegistriesPage({ queryRef }: ComplianceRegistriesPageProps) {
const { __ } = useTranslate();
const organizationId = useOrganizationId();
usePageTitle(__("Compliance Registries"));
const organization = usePreloadedQuery(
graphql`
query ComplianceRegistriesPageQuery($organizationId: ID!) {
node(id: $organizationId) {
... on Organization {
...ComplianceRegistriesPageFragment
}
}
}
`,
queryRef
);
const { data: registriesData, loadNext, hasNext } = usePaginationFragment(
complianceRegistriesPageFragment,
organization.node as ComplianceRegistriesPageFragment$key
);
const connectionId = registriesData?.complianceRegistries?.__id || "";
const registries: ComplianceRegistry[] = registriesData?.complianceRegistries?.edges?.map((edge) => edge.node) ?? [];
return (
<div className="space-y-6">
<PageHeader
title={__("Compliance Registries")}
description={__(
"Manage your organization's compliance registry entries."
)}
>
<CreateComplianceRegistryDialog organizationId={organizationId} connection={connectionId}>
<Button icon={IconPlusLarge}>{__("Add compliance registry")}</Button>
</CreateComplianceRegistryDialog>
</PageHeader>
{registries.length === 0 ? (
<Card padded>
<div className="text-center py-12">
<h3 className="text-lg font-semibold mb-2">
{__("No compliance registry entries yet")}
</h3>
<p className="text-txt-tertiary mb-4">
{__("Create your first compliance registry entry to get started.")}
</p>
</div>
</Card>
) : (
<Card>
<Table>
<Thead>
<Tr>
<Th>{__("Reference ID")}</Th>
<Th>{__("Area")}</Th>
<Th>{__("Source")}</Th>
<Th>{__("Status")}</Th>
<Th>{__("Audit")}</Th>
<Th>{__("Owner")}</Th>
<Th>{__("Due Date")}</Th>
<Th>{__("Actions")}</Th>
</Tr>
</Thead>
<Tbody>
{registries.map((registry) => (
<RegistryRow
key={registry.id}
registry={registry}
connectionId={connectionId}
/>
))}
</Tbody>
</Table>
{hasNext && (
<div className="p-4 border-t">
<Button
variant="secondary"
onClick={() => loadNext(10)}
disabled={!hasNext}
>
{__("Load more")}
</Button>
</div>
)}
</Card>
)}
</div>
);
}
function RegistryRow({
registry,
connectionId,
}: {
registry: ComplianceRegistry;
connectionId: string;
}) {
const organizationId = useOrganizationId();
const { __ } = useTranslate();
const [deleteRegistry] = useMutation(deleteComplianceRegistryMutation);
const confirm = useConfirm();
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString();
};
const handleDelete = () => {
confirm(
() =>
promisifyMutation(deleteRegistry)({
variables: {
input: {
complianceRegistryId: registry.id,
},
connections: [connectionId],
},
}),
{
message: sprintf(
__(
"This will permanently delete the compliance registry entry %s. This action cannot be undone."
),
registry.referenceId
),
}
);
};
return (
<Tr to={`/organizations/${organizationId}/complianceRegistries/${registry.id}`}>
<Td>
<span className="font-mono text-sm">{registry.referenceId}</span>
</Td>
<Td>{registry.area || "-"}</Td>
<Td>{registry.source || "-"}</Td>
<Td>
<Badge variant={getStatusVariant(registry.status || "OPEN")}>
{getStatusLabel(registry.status || "OPEN")}
</Badge>
</Td>
<Td>
{registry.audit?.name
? `${registry.audit.framework.name} - ${registry.audit.name}`
: registry.audit?.framework.name || "-"
}
</Td>
<Td>{registry.owner?.fullName || "-"}</Td>
<Td>
{registry.dueDate ? (
<time dateTime={registry.dueDate}>
{formatDate(registry.dueDate)}
</time>
) : (
<span className="text-txt-tertiary">{__("No due date")}</span>
)}
</Td>
<Td noLink width={50} className="text-end">
<ActionDropdown>
<DropdownItem
icon={IconTrashCan}
variant="danger"
onSelect={handleDelete}
>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</Td>
</Tr>
);
}

View File

@@ -0,0 +1,315 @@
import {
ConnectionHandler,
usePreloadedQuery,
type PreloadedQuery,
} from "react-relay";
import {
complianceRegistryNodeQuery,
useDeleteComplianceRegistry,
useUpdateComplianceRegistry,
ComplianceRegistriesConnectionKey,
} from "../../../hooks/graph/ComplianceRegistryGraph";
import {
ActionDropdown,
Badge,
Breadcrumb,
Button,
DropdownItem,
Field,
IconTrashCan,
Option,
Input,
Card,
Textarea,
useToast,
Select,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { useOrganizationId } from "/hooks/useOrganizationId";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { AuditSelectField } from "/components/form/AuditSelectField";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { Controller } from "react-hook-form";
import z from "zod";
import { getStatusVariant, getStatusLabel, formatDatetime, getComplianceRegistryStatusOptions } from "@probo/helpers";
import type { ComplianceRegistryGraphNodeQuery } from "/hooks/graph/__generated__/ComplianceRegistryGraphNodeQuery.graphql";
const updateRegistrySchema = z.object({
referenceId: z.string().min(1, "Reference ID is required"),
area: z.string().optional(),
source: z.string().optional(),
requirement: z.string().optional(),
actionsToBeImplemented: z.string().optional(),
regulator: z.string().optional(),
lastReviewDate: z.string().optional(),
dueDate: z.string().optional(),
status: z.enum(["OPEN", "IN_PROGRESS", "CLOSED"]),
ownerId: z.string().min(1, "Owner is required"),
auditId: z.string().min(1, "Audit is required"),
});
type Props = {
queryRef: PreloadedQuery<ComplianceRegistryGraphNodeQuery>;
};
export default function ComplianceRegistryDetailsPage(props: Props) {
const data = usePreloadedQuery<ComplianceRegistryGraphNodeQuery>(complianceRegistryNodeQuery, props.queryRef);
const registry = data.node;
const { __ } = useTranslate();
const { toast } = useToast();
const organizationId = useOrganizationId();
if (!registry) {
return <div>{__("Compliance registry entry not found")}</div>;
}
const updateRegistry = useUpdateComplianceRegistry();
const statusOptions = getComplianceRegistryStatusOptions(__);
const connectionId = ConnectionHandler.getConnectionID(
organizationId,
ComplianceRegistriesConnectionKey
);
const deleteRegistry = useDeleteComplianceRegistry({ id: registry.id!, referenceId: registry.referenceId! }, connectionId);
const { register, handleSubmit, formState, control } = useFormWithSchema(
updateRegistrySchema,
{
defaultValues: {
referenceId: registry.referenceId || "",
area: registry.area || "",
source: registry.source || "",
requirement: registry.requirement || "",
actionsToBeImplemented: registry.actionsToBeImplemented || "",
regulator: registry.regulator || "",
lastReviewDate: registry.lastReviewDate
? new Date(registry.lastReviewDate).toISOString().split("T")[0]
: "",
dueDate: registry.dueDate
? new Date(registry.dueDate).toISOString().split("T")[0]
: "",
status: registry.status || "OPEN",
ownerId: registry.owner?.id || "",
auditId: registry.audit?.id || "",
},
}
);
const onSubmit = handleSubmit(async (formData) => {
try {
await updateRegistry({
id: registry.id!,
referenceId: formData.referenceId,
area: formData.area || undefined,
source: formData.source || undefined,
requirement: formData.requirement || undefined,
actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
regulator: formData.regulator || undefined,
lastReviewDate: formatDatetime(formData.lastReviewDate),
dueDate: formatDatetime(formData.dueDate),
status: formData.status,
ownerId: formData.ownerId,
auditId: formData.auditId,
});
toast({
title: __("Success"),
description: __("Compliance registry entry updated successfully"),
variant: "success",
});
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to update compliance registry entry"),
variant: "error",
});
}
});
return (
<div className="space-y-6">
<div className="flex justify-between items-start">
<div>
<Breadcrumb
items={[
{ label: __("Compliance Registries"), to: "../complianceRegistries" },
{ label: registry.referenceId! },
]}
/>
<div className="flex items-center gap-3 mt-2">
<h1 className="text-2xl font-bold">{registry.referenceId}</h1>
<Badge variant={getStatusVariant(registry.status || "OPEN")}>
{getStatusLabel(registry.status || "OPEN")}
</Badge>
</div>
</div>
<ActionDropdown>
<DropdownItem icon={IconTrashCan} onClick={deleteRegistry}>
{__("Delete")}
</DropdownItem>
</ActionDropdown>
</div>
<Card padded>
<form onSubmit={onSubmit} className="space-y-6">
<Field
label={__("Reference ID")}
error={formState.errors.referenceId?.message}
required
>
<Input
{...register("referenceId")}
placeholder={__("Enter reference ID")}
/>
</Field>
<Controller
name="auditId"
control={control}
render={() => (
<AuditSelectField
organizationId={organizationId}
control={control}
name="auditId"
label={__("Audit")}
error={formState.errors.auditId?.message}
required
/>
)}
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
label={__("Area")}
error={formState.errors.area?.message}
>
<Input
{...register("area")}
placeholder={__("Enter area")}
/>
</Field>
<Field
label={__("Source")}
error={formState.errors.source?.message}
>
<Input
{...register("source")}
placeholder={__("Enter source")}
/>
</Field>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field label={__("Status")}>
<Controller
control={control}
name="status"
render={({ field }) => (
<Select
variant="editor"
placeholder={__("Select status")}
onValueChange={field.onChange}
value={field.value}
className="w-full"
>
{statusOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
)}
/>
{formState.errors.status && (
<p className="text-sm text-red-500 mt-1">{formState.errors.status.message}</p>
)}
</Field>
<Controller
name="ownerId"
control={control}
render={() => (
<PeopleSelectField
organizationId={organizationId}
control={control}
name="ownerId"
label={__("Owner")}
error={formState.errors.ownerId?.message}
required
/>
)}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
label={__("Regulator")}
error={formState.errors.regulator?.message}
>
<Input
{...register("regulator")}
placeholder={__("Enter regulator")}
/>
</Field>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Field
label={__("Last Review Date")}
error={formState.errors.lastReviewDate?.message}
>
<Input
{...register("lastReviewDate")}
type="date"
/>
</Field>
<Field
label={__("Due Date")}
error={formState.errors.dueDate?.message}
>
<Input
{...register("dueDate")}
type="date"
/>
</Field>
</div>
<Field
label={__("Requirement")}
error={formState.errors.requirement?.message}
>
<Textarea
{...register("requirement")}
placeholder={__("Enter requirement")}
rows={4}
/>
</Field>
<Field
label={__("Actions to be Implemented")}
error={formState.errors.actionsToBeImplemented?.message}
>
<Textarea
{...register("actionsToBeImplemented")}
placeholder={__("Enter actions to be implemented")}
rows={4}
/>
</Field>
<div className="flex justify-end">
<Button
type="submit"
disabled={formState.isSubmitting}
>
{formState.isSubmitting ? __("Saving...") : __("Save Changes")}
</Button>
</div>
</form>
</Card>
</div>
);
}

View File

@@ -0,0 +1,346 @@
/**
* @generated SignedSource<<388195a5e7e9e9a1a167ad7cb298c935>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ReaderFragment } from 'relay-runtime';
export type ComplianceRegistryStatus = "CLOSED" | "IN_PROGRESS" | "OPEN";
import { FragmentRefs } from "relay-runtime";
export type ComplianceRegistriesPageFragment$data = {
readonly complianceRegistries: {
readonly __id: string;
readonly edges: ReadonlyArray<{
readonly node: {
readonly actionsToBeImplemented: string | null | undefined;
readonly area: string | null | undefined;
readonly audit: {
readonly framework: {
readonly id: string;
readonly name: string;
};
readonly id: string;
readonly name: string | null | undefined;
};
readonly createdAt: any;
readonly dueDate: any | null | undefined;
readonly id: string;
readonly lastReviewDate: any | null | undefined;
readonly owner: {
readonly fullName: string;
readonly id: string;
};
readonly referenceId: string;
readonly regulator: string | null | undefined;
readonly requirement: string | null | undefined;
readonly source: string | null | undefined;
readonly status: ComplianceRegistryStatus;
readonly updatedAt: any;
};
}>;
readonly pageInfo: {
readonly endCursor: any | null | undefined;
readonly hasNextPage: boolean;
};
readonly totalCount: number;
};
readonly id: string;
readonly " $fragmentType": "ComplianceRegistriesPageFragment";
};
export type ComplianceRegistriesPageFragment$key = {
readonly " $data"?: ComplianceRegistriesPageFragment$data;
readonly " $fragmentSpreads": FragmentRefs<"ComplianceRegistriesPageFragment">;
};
import ComplianceRegistriesPageRefetchQuery_graphql from './ComplianceRegistriesPageRefetchQuery.graphql';
const node: ReaderFragment = (function(){
var v0 = [
"complianceRegistries"
],
v1 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"argumentDefinitions": [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "after"
},
{
"defaultValue": 10,
"kind": "LocalArgument",
"name": "first"
}
],
"kind": "Fragment",
"metadata": {
"connection": [
{
"count": "first",
"cursor": "after",
"direction": "forward",
"path": (v0/*: any*/)
}
],
"refetch": {
"connection": {
"forward": {
"count": "first",
"cursor": "after"
},
"backward": null,
"path": (v0/*: any*/)
},
"fragmentPathInResult": [
"node"
],
"operation": ComplianceRegistriesPageRefetchQuery_graphql,
"identifierInfo": {
"identifierField": "id",
"identifierQueryVariableName": "id"
}
}
},
"name": "ComplianceRegistriesPageFragment",
"selections": [
(v1/*: any*/),
{
"alias": "complianceRegistries",
"args": null,
"concreteType": "ComplianceRegistryConnection",
"kind": "LinkedField",
"name": "__ComplianceRegistriesPage_complianceRegistries_connection",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "totalCount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistryEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistry",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "referenceId",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "area",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "source",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "requirement",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lastReviewDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dueDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "actionsToBeImplemented",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "regulator",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Audit",
"kind": "LinkedField",
"name": "audit",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "framework",
"plural": false,
"selections": [
(v1/*: any*/),
(v2/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v1/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": null
}
],
"type": "Organization",
"abstractKey": null
};
})();
(node as any).hash = "c85f1b770b00186cc074726ee8766698";
export default node;

View File

@@ -0,0 +1,361 @@
/**
* @generated SignedSource<<45ac04d64bae14926f41dccda7ec5a25>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ComplianceRegistriesPageQuery$variables = {
organizationId: string;
};
export type ComplianceRegistriesPageQuery$data = {
readonly node: {
readonly " $fragmentSpreads": FragmentRefs<"ComplianceRegistriesPageFragment">;
};
};
export type ComplianceRegistriesPageQuery = {
response: ComplianceRegistriesPageQuery$data;
variables: ComplianceRegistriesPageQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "organizationId"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "organizationId"
}
],
v2 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v4 = [
{
"kind": "Literal",
"name": "first",
"value": 10
}
],
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ComplianceRegistriesPageQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"kind": "InlineFragment",
"selections": [
{
"args": null,
"kind": "FragmentSpread",
"name": "ComplianceRegistriesPageFragment"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ComplianceRegistriesPageQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v2/*: any*/),
(v3/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v4/*: any*/),
"concreteType": "ComplianceRegistryConnection",
"kind": "LinkedField",
"name": "complianceRegistries",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "totalCount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistryEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistry",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "referenceId",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "area",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "source",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "requirement",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lastReviewDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dueDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "actionsToBeImplemented",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "regulator",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Audit",
"kind": "LinkedField",
"name": "audit",
"plural": false,
"selections": [
(v3/*: any*/),
(v5/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "framework",
"plural": false,
"selections": [
(v3/*: any*/),
(v5/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
(v2/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": "complianceRegistries(first:10)"
},
{
"alias": null,
"args": (v4/*: any*/),
"filters": null,
"handle": "connection",
"key": "ComplianceRegistriesPage_complianceRegistries",
"kind": "LinkedHandle",
"name": "complianceRegistries"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "fcc5d4d2cc4ca376314b334d7f36316f",
"id": null,
"metadata": {},
"name": "ComplianceRegistriesPageQuery",
"operationKind": "query",
"text": "query ComplianceRegistriesPageQuery(\n $organizationId: ID!\n) {\n node(id: $organizationId) {\n __typename\n ... on Organization {\n ...ComplianceRegistriesPageFragment\n }\n id\n }\n}\n\nfragment ComplianceRegistriesPageFragment on Organization {\n id\n complianceRegistries(first: 10) {\n totalCount\n edges {\n node {\n id\n referenceId\n area\n source\n requirement\n status\n lastReviewDate\n dueDate\n actionsToBeImplemented\n regulator\n audit {\n id\n name\n framework {\n id\n name\n }\n }\n owner {\n id\n fullName\n }\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n"
}
};
})();
(node as any).hash = "3e8551eebdf52ee84fb3910ee77cfe15";
export default node;

View File

@@ -0,0 +1,371 @@
/**
* @generated SignedSource<<2f421894f05c26b8fbca3d5e76ebdf0d>>
* @lightSyntaxTransform
* @nogrep
*/
/* tslint:disable */
/* eslint-disable */
// @ts-nocheck
import { ConcreteRequest } from 'relay-runtime';
import { FragmentRefs } from "relay-runtime";
export type ComplianceRegistriesPageRefetchQuery$variables = {
after?: any | null | undefined;
first?: number | null | undefined;
id: string;
};
export type ComplianceRegistriesPageRefetchQuery$data = {
readonly node: {
readonly " $fragmentSpreads": FragmentRefs<"ComplianceRegistriesPageFragment">;
};
};
export type ComplianceRegistriesPageRefetchQuery = {
response: ComplianceRegistriesPageRefetchQuery$data;
variables: ComplianceRegistriesPageRefetchQuery$variables;
};
const node: ConcreteRequest = (function(){
var v0 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "after"
},
{
"defaultValue": 10,
"kind": "LocalArgument",
"name": "first"
},
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "id"
}
],
v1 = [
{
"kind": "Variable",
"name": "id",
"variableName": "id"
}
],
v2 = [
{
"kind": "Variable",
"name": "after",
"variableName": "after"
},
{
"kind": "Variable",
"name": "first",
"variableName": "first"
}
],
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__typename",
"storageKey": null
},
v4 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "id",
"storageKey": null
},
v5 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "name",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "ComplianceRegistriesPageRefetchQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
{
"args": (v2/*: any*/),
"kind": "FragmentSpread",
"name": "ComplianceRegistriesPageFragment"
}
],
"storageKey": null
}
],
"type": "Query",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "ComplianceRegistriesPageRefetchQuery",
"selections": [
{
"alias": null,
"args": (v1/*: any*/),
"concreteType": null,
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v3/*: any*/),
(v4/*: any*/),
{
"kind": "InlineFragment",
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "ComplianceRegistryConnection",
"kind": "LinkedField",
"name": "complianceRegistries",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "totalCount",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistryEdge",
"kind": "LinkedField",
"name": "edges",
"plural": true,
"selections": [
{
"alias": null,
"args": null,
"concreteType": "ComplianceRegistry",
"kind": "LinkedField",
"name": "node",
"plural": false,
"selections": [
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "referenceId",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "area",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "source",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "requirement",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "status",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "lastReviewDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "dueDate",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "actionsToBeImplemented",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "regulator",
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "Audit",
"kind": "LinkedField",
"name": "audit",
"plural": false,
"selections": [
(v4/*: any*/),
(v5/*: any*/),
{
"alias": null,
"args": null,
"concreteType": "Framework",
"kind": "LinkedField",
"name": "framework",
"plural": false,
"selections": [
(v4/*: any*/),
(v5/*: any*/)
],
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "People",
"kind": "LinkedField",
"name": "owner",
"plural": false,
"selections": [
(v4/*: any*/),
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "fullName",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "createdAt",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "updatedAt",
"storageKey": null
},
(v3/*: any*/)
],
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "cursor",
"storageKey": null
}
],
"storageKey": null
},
{
"alias": null,
"args": null,
"concreteType": "PageInfo",
"kind": "LinkedField",
"name": "pageInfo",
"plural": false,
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "hasNextPage",
"storageKey": null
},
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "endCursor",
"storageKey": null
}
],
"storageKey": null
},
{
"kind": "ClientExtension",
"selections": [
{
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "__id",
"storageKey": null
}
]
}
],
"storageKey": null
},
{
"alias": null,
"args": (v2/*: any*/),
"filters": null,
"handle": "connection",
"key": "ComplianceRegistriesPage_complianceRegistries",
"kind": "LinkedHandle",
"name": "complianceRegistries"
}
],
"type": "Organization",
"abstractKey": null
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "aaec01ab09a3becc49afe167cc55acb6",
"id": null,
"metadata": {},
"name": "ComplianceRegistriesPageRefetchQuery",
"operationKind": "query",
"text": "query ComplianceRegistriesPageRefetchQuery(\n $after: CursorKey\n $first: Int = 10\n $id: ID!\n) {\n node(id: $id) {\n __typename\n ...ComplianceRegistriesPageFragment_2HEEH6\n id\n }\n}\n\nfragment ComplianceRegistriesPageFragment_2HEEH6 on Organization {\n id\n complianceRegistries(first: $first, after: $after) {\n totalCount\n edges {\n node {\n id\n referenceId\n area\n source\n requirement\n status\n lastReviewDate\n dueDate\n actionsToBeImplemented\n regulator\n audit {\n id\n name\n framework {\n id\n name\n }\n }\n owner {\n id\n fullName\n }\n createdAt\n updatedAt\n __typename\n }\n cursor\n }\n pageInfo {\n hasNextPage\n endCursor\n }\n }\n}\n"
}
};
})();
(node as any).hash = "c85f1b770b00186cc074726ee8766698";
export default node;

View File

@@ -0,0 +1,252 @@
import { type ReactNode } from "react";
import {
Button,
Field,
useToast,
Dialog,
DialogContent,
DialogFooter,
useDialogRef,
Textarea,
Breadcrumb,
Label,
Select,
Option,
Input,
} from "@probo/ui";
import { useTranslate } from "@probo/i18n";
import { z } from "zod";
import { useFormWithSchema } from "/hooks/useFormWithSchema";
import { useCreateComplianceRegistry } from "../../../../hooks/graph/ComplianceRegistryGraph";
import { PeopleSelectField } from "/components/form/PeopleSelectField";
import { AuditSelectField } from "/components/form/AuditSelectField";
import { Controller } from "react-hook-form";
import { formatDatetime, getComplianceRegistryStatusOptions } from "@probo/helpers";
const schema = z.object({
referenceId: z.string().min(1, "Reference ID is required"),
area: z.string().optional(),
source: z.string().optional(),
auditId: z.string().min(1, "Audit is required"),
requirement: z.string().optional(),
actionsToBeImplemented: z.string().optional(),
regulator: z.string().optional(),
ownerId: z.string().min(1, "Owner is required"),
lastReviewDate: z.string().optional(),
dueDate: z.string().optional(),
status: z.enum(["OPEN", "IN_PROGRESS", "CLOSED"]),
});
type FormData = z.infer<typeof schema>;
interface CreateComplianceRegistryDialogProps {
children: ReactNode;
organizationId: string;
connection?: string;
}
export function CreateComplianceRegistryDialog({
children,
organizationId,
connection,
}: CreateComplianceRegistryDialogProps) {
const { __ } = useTranslate();
const { toast } = useToast();
const dialogRef = useDialogRef();
const createRegistry = useCreateComplianceRegistry(connection || "");
const statusOptions = getComplianceRegistryStatusOptions(__);
const { register, handleSubmit, formState, reset, control } = useFormWithSchema(schema, {
defaultValues: {
referenceId: "",
area: "",
source: "",
auditId: "",
requirement: "",
actionsToBeImplemented: "",
regulator: "",
ownerId: "",
lastReviewDate: "",
dueDate: "",
status: "OPEN" as const,
},
});
const onSubmit = handleSubmit(async (formData: FormData) => {
try {
await createRegistry({
organizationId,
referenceId: formData.referenceId,
area: formData.area || undefined,
source: formData.source || undefined,
auditId: formData.auditId,
requirement: formData.requirement || undefined,
actionsToBeImplemented: formData.actionsToBeImplemented || undefined,
regulator: formData.regulator || undefined,
ownerId: formData.ownerId,
lastReviewDate: formatDatetime(formData.lastReviewDate),
dueDate: formatDatetime(formData.dueDate),
status: formData.status,
});
toast({
title: __("Success"),
description: __("Compliance registry entry created successfully"),
variant: "success",
});
reset();
dialogRef.current?.close();
} catch (error) {
toast({
title: __("Error"),
description: __("Failed to create compliance registry entry"),
variant: "error",
});
}
});
return (
<Dialog
ref={dialogRef}
trigger={children}
title={<Breadcrumb items={[__("Registries"), __("Create Compliance Entry")]} />}
className="max-w-2xl"
>
<form onSubmit={onSubmit}>
<DialogContent padded className="space-y-4">
<Field
label={__("Reference ID")}
{...register("referenceId")}
placeholder="CR-001"
error={formState.errors.referenceId?.message}
required
/>
<AuditSelectField
organizationId={organizationId}
control={control}
name="auditId"
label={__("Audit")}
error={formState.errors.auditId?.message}
required
/>
<div className="grid grid-cols-2 gap-4">
<Field
label={__("Area")}
{...register("area")}
placeholder={__("Enter area")}
error={formState.errors.area?.message}
/>
<Field
label={__("Source")}
{...register("source")}
placeholder={__("Enter source")}
error={formState.errors.source?.message}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<Field label={__("Status")}>
<Controller
control={control}
name="status"
render={({ field }) => (
<Select
variant="editor"
placeholder={__("Select status")}
onValueChange={field.onChange}
value={field.value}
className="w-full"
>
{statusOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
)}
/>
{formState.errors.status && (
<p className="text-sm text-red-500 mt-1">{formState.errors.status.message}</p>
)}
</Field>
<PeopleSelectField
organizationId={organizationId}
control={control}
name="ownerId"
label={__("Owner")}
error={formState.errors.ownerId?.message}
required
/>
</div>
<div className="grid grid-cols-2 gap-4">
<Field
label={__("Regulator")}
{...register("regulator")}
placeholder={__("Enter regulator")}
error={formState.errors.regulator?.message}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="lastReviewDate">{__("Last Review Date")}</Label>
<Input
id="lastReviewDate"
type="date"
{...register("lastReviewDate")}
/>
{formState.errors.lastReviewDate && (
<p className="text-sm text-red-500">{formState.errors.lastReviewDate.message}</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="dueDate">{__("Due Date")}</Label>
<Input
id="dueDate"
type="date"
{...register("dueDate")}
/>
{formState.errors.dueDate && (
<p className="text-sm text-red-500">{formState.errors.dueDate.message}</p>
)}
</div>
</div>
<div className="space-y-2">
<Label htmlFor="requirement">{__("Requirement")}</Label>
<Textarea
id="requirement"
{...register("requirement")}
placeholder={__("Enter requirement details...")}
rows={3}
/>
</div>
<div className="space-y-2">
<Label htmlFor="actionsToBeImplemented">{__("Actions to be Implemented")}</Label>
<Textarea
id="actionsToBeImplemented"
{...register("actionsToBeImplemented")}
placeholder={__("Enter actions to be implemented...")}
rows={3}
/>
</div>
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={formState.isSubmitting}>
{formState.isSubmitting ? __("Creating...") : __("Create Compliance Registry Entry")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

View File

@@ -156,8 +156,6 @@ export default function NonconformityRegistryDetailsPage(props: Props) {
<div className="max-w-4xl">
<Card padded>
<form onSubmit={onSubmit} className="space-y-6">
<h3 className="text-lg font-medium">{__("Nonconformity Registry")}</h3>
<Field
label={__("Reference ID")}
required