Add baa on vendors

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/pages/organizations/vendors/dialogs/DeleteBusinessAssociateAgreementDialog.tsx

@@ -0,0 +1,89 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Spinner,
+  useDialogRef,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { sprintf } from "@probo/helpers";
+import { graphql } from "react-relay";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+
+const deleteBusinessAssociateAgreementMutation = graphql`
+  mutation DeleteBusinessAssociateAgreementDialogMutation(
+    $input: DeleteVendorBusinessAssociateAgreementInput!
+  ) {
+    deleteVendorBusinessAssociateAgreement(input: $input) {
+      deletedVendorId
+    }
+  }
+`;
+
+type Props = {
+  children: React.ReactNode;
+  vendorId: string;
+  fileName: string;
+  onSuccess?: () => void;
+};
+
+export function DeleteBusinessAssociateAgreementDialog({
+  children,
+  vendorId,
+  fileName,
+  onSuccess,
+}: Props) {
+  const { __ } = useTranslate();
+  const ref = useDialogRef();
+
+  const [mutate, isDeleting] = useMutationWithToasts(deleteBusinessAssociateAgreementMutation, {
+    successMessage: __("Business Associate Agreement deleted successfully"),
+    errorMessage: __("Failed to delete Business Associate Agreement"),
+  });
+
+  const handleDelete = async () => {
+    await mutate({
+      variables: {
+        input: {
+          vendorId,
+        },
+      },
+    });
+
+    onSuccess?.();
+    ref.current?.close();
+  };
+
+  return (
+    <Dialog
+      ref={ref}
+      trigger={children}
+      title={__("Delete Business Associate Agreement")}
+      className="max-w-md"
+    >
+      <DialogContent padded>
+        <p className="text-txt-secondary">
+          {sprintf(
+            __("Are you sure you want to delete the Business Associate Agreement \"%s\"?"),
+            fileName
+          )}
+        </p>
+        <p className="text-txt-secondary mt-2">
+          {__("This action cannot be undone.")}
+        </p>
+      </DialogContent>
+
+      <DialogFooter>
+        <Button
+          variant="danger"
+          onClick={handleDelete}
+          disabled={isDeleting}
+          icon={isDeleting ? Spinner : undefined}
+        >
+          {__("Delete")}
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}

apps/console/src/pages/organizations/vendors/dialogs/EditBusinessAssociateAgreementDialog.tsx

@@ -0,0 +1,135 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Field,
+  Input,
+  Spinner,
+  useDialogRef,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { graphql } from "react-relay";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+
+const updateBusinessAssociateAgreementMutation = graphql`
+  mutation EditBusinessAssociateAgreementDialogMutation(
+    $input: UpdateVendorBusinessAssociateAgreementInput!
+  ) {
+    updateVendorBusinessAssociateAgreement(input: $input) {
+      vendorBusinessAssociateAgreement {
+        id
+        fileUrl
+        validFrom
+        validUntil
+        createdAt
+      }
+    }
+  }
+`;
+
+const schema = z.object({
+  validFrom: z.string().optional(),
+  validUntil: z.string().optional(),
+});
+
+type Props = {
+  children: React.ReactNode;
+  vendorId: string;
+  agreement: {
+    validFrom?: string | null;
+    validUntil?: string | null;
+  };
+  onSuccess?: () => void;
+};
+
+export function EditBusinessAssociateAgreementDialog({
+  children,
+  vendorId,
+  agreement,
+  onSuccess,
+}: Props) {
+  const { __ } = useTranslate();
+  const ref = useDialogRef();
+
+  const formatDateForForm = (datetime?: string | null) => {
+    if (!datetime) return "";
+    return datetime.split("T")[0];
+  };
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting },
+    reset,
+  } = useFormWithSchema(schema, {
+    defaultValues: {
+      validFrom: formatDateForForm(agreement.validFrom),
+      validUntil: formatDateForForm(agreement.validUntil),
+    },
+  });
+
+  const [mutate] = useMutationWithToasts(updateBusinessAssociateAgreementMutation, {
+    successMessage: __("Business Associate Agreement updated successfully"),
+    errorMessage: __("Failed to update Business Associate Agreement"),
+  });
+
+  const onSubmit = handleSubmit(async (data) => {
+    const formatDatetime = (dateString?: string) => {
+      if (!dateString) return null;
+      return `${dateString}T00:00:00Z`;
+    };
+
+    await mutate({
+      variables: {
+        input: {
+          vendorId,
+          validFrom: formatDatetime(data.validFrom),
+          validUntil: formatDatetime(data.validUntil),
+        },
+      },
+    });
+
+    onSuccess?.();
+    ref.current?.close();
+  });
+
+  const handleClose = () => {
+    reset();
+  };
+
+  return (
+    <Dialog
+      title={__("Edit Business Associate Agreement")}
+      ref={ref}
+      trigger={children}
+      className="max-w-lg"
+      onClose={handleClose}
+    >
+      <form onSubmit={onSubmit}>
+        <DialogContent padded className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <Field label={__("Valid from")}>
+              <Input {...register("validFrom")} type="date" />
+            </Field>
+            <Field label={__("Valid until")}>
+              <Input {...register("validUntil")} type="date" />
+            </Field>
+          </div>
+        </DialogContent>
+
+        <DialogFooter>
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            icon={isSubmitting ? Spinner : undefined}
+          >
+            {__("Update")}
+          </Button>
+        </DialogFooter>
+      </form>
+    </Dialog>
+  );
+}

apps/console/src/pages/organizations/vendors/dialogs/UploadBusinessAssociateAgreementDialog.tsx

@@ -0,0 +1,178 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  Dropzone,
+  Field,
+  Spinner,
+  Input,
+  useDialogRef,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { graphql } from "react-relay";
+import { z } from "zod";
+import { useFormWithSchema } from "/hooks/useFormWithSchema";
+import { useMutationWithToasts } from "/hooks/useMutationWithToasts";
+import { useState } from "react";
+
+const uploadBusinessAssociateAgreementMutation = graphql`
+  mutation UploadBusinessAssociateAgreementDialogMutation(
+    $input: UploadVendorBusinessAssociateAgreementInput!
+  ) {
+    uploadVendorBusinessAssociateAgreement(input: $input) {
+      vendorBusinessAssociateAgreement {
+        id
+        fileName
+        fileUrl
+        validFrom
+        validUntil
+        createdAt
+      }
+    }
+  }
+`;
+
+const schema = z.object({
+  fileName: z.string().min(1, "File name is required"),
+  validFrom: z.string().optional(),
+  validUntil: z.string().optional(),
+});
+
+type Props = {
+  children: React.ReactNode;
+  vendorId: string;
+  onSuccess?: () => void;
+};
+
+export function UploadBusinessAssociateAgreementDialog({
+  children,
+  vendorId,
+  onSuccess,
+}: Props) {
+  const { __ } = useTranslate();
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const ref = useDialogRef();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+    setValue,
+  } = useFormWithSchema(schema, {
+    defaultValues: {
+      fileName: "",
+      validFrom: "",
+      validUntil: "",
+    },
+  });
+
+  const [mutate] = useMutationWithToasts(uploadBusinessAssociateAgreementMutation, {
+    successMessage: __("Business Associate Agreement uploaded successfully"),
+    errorMessage: __("Failed to upload Business Associate Agreement"),
+  });
+
+  const handleDrop = (files: File[]) => {
+    if (files.length > 0) {
+      const file = files[0];
+      setUploadedFile(file);
+      setValue("fileName", file.name);
+    }
+  };
+
+  const onSubmit = handleSubmit(async (data) => {
+    if (!uploadedFile) {
+      return;
+    }
+
+    const formatDatetime = (dateString?: string) => {
+      if (!dateString) return null;
+      return `${dateString}T00:00:00Z`;
+    };
+
+    await mutate({
+      variables: {
+        input: {
+          vendorId,
+          fileName: data.fileName,
+          validFrom: formatDatetime(data.validFrom),
+          validUntil: formatDatetime(data.validUntil),
+          file: null,
+        },
+      },
+      uploadables: {
+        "input.file": uploadedFile,
+      },
+    });
+
+    reset();
+    setUploadedFile(null);
+    onSuccess?.();
+    ref.current?.close();
+  });
+
+  const handleClose = () => {
+    reset();
+    setUploadedFile(null);
+  };
+
+  return (
+    <Dialog
+      title={__("Upload Business Associate Agreement")}
+      ref={ref}
+      trigger={children}
+      className="max-w-lg"
+      onClose={handleClose}
+    >
+        <form onSubmit={onSubmit}>
+          <DialogContent padded className="space-y-4">
+            <Dropzone
+              description={__("Only PDF files up to 10MB are allowed")}
+              isUploading={isSubmitting}
+              onDrop={handleDrop}
+              accept={{
+                "application/pdf": [".pdf"],
+              }}
+              maxSize={10}
+            />
+
+            {uploadedFile && (
+              <div className="p-3 bg-tertiary-subtle rounded-lg">
+                <p className="text-sm font-medium">{__("Selected file")}:</p>
+                <p className="text-sm text-txt-secondary">{uploadedFile.name}</p>
+              </div>
+            )}
+
+            <Field
+              {...register("fileName")}
+              label={__("File name")}
+              type="text"
+              required
+              error={errors.fileName?.message}
+              placeholder={__("Business Associate Agreement")}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <Field label={__("Valid from")}>
+                <Input {...register("validFrom")} type="date" />
+              </Field>
+              <Field label={__("Valid until")}>
+                <Input {...register("validUntil")} type="date" />
+              </Field>
+            </div>
+          </DialogContent>
+
+          <DialogFooter>
+            <Button
+              type="submit"
+              disabled={isSubmitting || !uploadedFile}
+              icon={isSubmitting ? Spinner : undefined}
+            >
+              {__("Upload")}
+            </Button>
+          </DialogFooter>
+        </form>
+      </Dialog>
+    );
+}

apps/console/src/pages/organizations/vendors/dialogs/__generated__/DeleteBusinessAssociateAgreementDialogMutation.graphql.ts

@@ -0,0 +1,92 @@
+/**
+ * @generated SignedSource<<26343418dbdd4baf63f2846470e2d3ab>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type DeleteVendorBusinessAssociateAgreementInput = {
+  vendorId: string;
+};
+export type DeleteBusinessAssociateAgreementDialogMutation$variables = {
+  input: DeleteVendorBusinessAssociateAgreementInput;
+};
+export type DeleteBusinessAssociateAgreementDialogMutation$data = {
+  readonly deleteVendorBusinessAssociateAgreement: {
+    readonly deletedVendorId: string;
+  };
+};
+export type DeleteBusinessAssociateAgreementDialogMutation = {
+  response: DeleteBusinessAssociateAgreementDialogMutation$data;
+  variables: DeleteBusinessAssociateAgreementDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "DeleteVendorBusinessAssociateAgreementPayload",
+    "kind": "LinkedField",
+    "name": "deleteVendorBusinessAssociateAgreement",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "deletedVendorId",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "DeleteBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "DeleteBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "c8aa903ee410ee9e591c82f7f75e044c",
+    "id": null,
+    "metadata": {},
+    "name": "DeleteBusinessAssociateAgreementDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation DeleteBusinessAssociateAgreementDialogMutation(\n  $input: DeleteVendorBusinessAssociateAgreementInput!\n) {\n  deleteVendorBusinessAssociateAgreement(input: $input) {\n    deletedVendorId\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "39106d060e4e1da4eaa78a8205fe7cf8";
+
+export default node;

apps/console/src/pages/organizations/vendors/dialogs/__generated__/EditBusinessAssociateAgreementDialogMutation.graphql.ts

@@ -0,0 +1,139 @@
+/**
+ * @generated SignedSource<<8d5961820ccfa705a899582a9a8ca953>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UpdateVendorBusinessAssociateAgreementInput = {
+  validFrom?: any | null | undefined;
+  validUntil?: any | null | undefined;
+  vendorId: string;
+};
+export type EditBusinessAssociateAgreementDialogMutation$variables = {
+  input: UpdateVendorBusinessAssociateAgreementInput;
+};
+export type EditBusinessAssociateAgreementDialogMutation$data = {
+  readonly updateVendorBusinessAssociateAgreement: {
+    readonly vendorBusinessAssociateAgreement: {
+      readonly createdAt: any;
+      readonly fileUrl: string;
+      readonly id: string;
+      readonly validFrom: any | null | undefined;
+      readonly validUntil: any | null | undefined;
+    };
+  };
+};
+export type EditBusinessAssociateAgreementDialogMutation = {
+  response: EditBusinessAssociateAgreementDialogMutation$data;
+  variables: EditBusinessAssociateAgreementDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UpdateVendorBusinessAssociateAgreementPayload",
+    "kind": "LinkedField",
+    "name": "updateVendorBusinessAssociateAgreement",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "VendorBusinessAssociateAgreement",
+        "kind": "LinkedField",
+        "name": "vendorBusinessAssociateAgreement",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "fileUrl",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "validFrom",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "validUntil",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "EditBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "EditBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "2e50e54d255a9bea661d82188913ed9c",
+    "id": null,
+    "metadata": {},
+    "name": "EditBusinessAssociateAgreementDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation EditBusinessAssociateAgreementDialogMutation(\n  $input: UpdateVendorBusinessAssociateAgreementInput!\n) {\n  updateVendorBusinessAssociateAgreement(input: $input) {\n    vendorBusinessAssociateAgreement {\n      id\n      fileUrl\n      validFrom\n      validUntil\n      createdAt\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "10b614dbbdee430ed650b94051be4bbc";
+
+export default node;

apps/console/src/pages/organizations/vendors/dialogs/__generated__/UploadBusinessAssociateAgreementDialogMutation.graphql.ts

@@ -0,0 +1,149 @@
+/**
+ * @generated SignedSource<<e815dea06fd48ec50789f2fedfd1beb5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type UploadVendorBusinessAssociateAgreementInput = {
+  file: any;
+  fileName: string;
+  validFrom?: any | null | undefined;
+  validUntil?: any | null | undefined;
+  vendorId: string;
+};
+export type UploadBusinessAssociateAgreementDialogMutation$variables = {
+  input: UploadVendorBusinessAssociateAgreementInput;
+};
+export type UploadBusinessAssociateAgreementDialogMutation$data = {
+  readonly uploadVendorBusinessAssociateAgreement: {
+    readonly vendorBusinessAssociateAgreement: {
+      readonly createdAt: any;
+      readonly fileName: string;
+      readonly fileUrl: string;
+      readonly id: string;
+      readonly validFrom: any | null | undefined;
+      readonly validUntil: any | null | undefined;
+    };
+  };
+};
+export type UploadBusinessAssociateAgreementDialogMutation = {
+  response: UploadBusinessAssociateAgreementDialogMutation$data;
+  variables: UploadBusinessAssociateAgreementDialogMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "UploadVendorBusinessAssociateAgreementPayload",
+    "kind": "LinkedField",
+    "name": "uploadVendorBusinessAssociateAgreement",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "VendorBusinessAssociateAgreement",
+        "kind": "LinkedField",
+        "name": "vendorBusinessAssociateAgreement",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "id",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "fileName",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "fileUrl",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "validFrom",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "validUntil",
+            "storageKey": null
+          },
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "createdAt",
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "UploadBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "UploadBusinessAssociateAgreementDialogMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "bb7a0f67773da5b3916d08fdeaa2dc8d",
+    "id": null,
+    "metadata": {},
+    "name": "UploadBusinessAssociateAgreementDialogMutation",
+    "operationKind": "mutation",
+    "text": "mutation UploadBusinessAssociateAgreementDialogMutation(\n  $input: UploadVendorBusinessAssociateAgreementInput!\n) {\n  uploadVendorBusinessAssociateAgreement(input: $input) {\n    vendorBusinessAssociateAgreement {\n      id\n      fileName\n      fileUrl\n      validFrom\n      validUntil\n      createdAt\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "e3fce209e1a4006a31996903e4c6cbae";
+
+export default node;

apps/console/src/pages/organizations/vendors/tabs/VendorOverviewTab.tsx

@@ -1,19 +1,44 @@
 import { useTranslate } from "@probo/i18n";
 import { useVendorForm } from "/hooks/forms/useVendorForm";
-import type { useVendorFormFragment$key } from "/hooks/forms/__generated__/useVendorFormFragment.graphql";
 import { useOutletContext } from "react-router";
-import { Button, Card, Field, Input } from "@probo/ui";
+import { Button, Card, Field, Input, IconPlusLarge, IconTrashCan, IconPencil } from "@probo/ui";
 import { PeopleSelectField } from "/components/form/PeopleSelectField";
 import { useOrganizationId } from "/hooks/useOrganizationId";
 import { useMemo } from "react";
 import { usePageTitle } from "@probo/hooks";
+import { downloadFile } from "@probo/helpers";
+import { useFragment, graphql } from "react-relay";
+import { UploadBusinessAssociateAgreementDialog } from "../dialogs/UploadBusinessAssociateAgreementDialog";
+import { DeleteBusinessAssociateAgreementDialog } from "../dialogs/DeleteBusinessAssociateAgreementDialog";
+import { EditBusinessAssociateAgreementDialog } from "../dialogs/EditBusinessAssociateAgreementDialog";
+import type { useVendorFormFragment$key } from "/hooks/forms/__generated__/useVendorFormFragment.graphql";
+import type { VendorOverviewTabBusinessAssociateAgreementFragment$key } from "./__generated__/VendorOverviewTabBusinessAssociateAgreementFragment.graphql";
+
+const vendorBusinessAssociateAgreementFragment = graphql`
+  fragment VendorOverviewTabBusinessAssociateAgreementFragment on Vendor {
+    businessAssociateAgreement {
+      id
+      fileName
+      fileUrl
+      validFrom
+      validUntil
+      createdAt
+    }
+  }
+`;
 
 export default function VendorOverviewTab() {
   const { vendor } = useOutletContext<{
-    vendor: useVendorFormFragment$key & { name: string };
+    vendor: useVendorFormFragment$key & { id: string; name: string };
   }>();
+
+  const { vendor: vendorForBAA } = useOutletContext<{
+    vendor: VendorOverviewTabBusinessAssociateAgreementFragment$key;
+  }>();
+
   const { __ } = useTranslate();
   const organizationId = useOrganizationId();
+
   const {
     control,
     register,
@@ -21,6 +46,12 @@ export default function VendorOverviewTab() {
     formState: { errors, isSubmitting },
   } = useVendorForm(vendor);
 
+  const vendorWithBAA = useFragment<VendorOverviewTabBusinessAssociateAgreementFragment$key>(
+    vendorBusinessAssociateAgreementFragment,
+    vendorForBAA
+  );
+  const businessAssociateAgreement = vendorWithBAA.businessAssociateAgreement;
+
   const urls = useMemo(
     () =>
       [
@@ -132,6 +163,73 @@ export default function VendorOverviewTab() {
         </Card>
       </div>
 
+      {/* Data agreements */}
+      <div className="space-y-4">
+        <h2 className="text-base font-medium">{__("Data agreements")}</h2>
+        <Card className="space-y-4" padded>
+          <div className="flex items-center justify-between p-4 border border-border-low rounded-lg">
+            <div className="flex-1">
+              <h3 className="font-medium text-txt-primary">
+                {__("Business Associate Agreement")}
+              </h3>
+              <p className="text-sm text-txt-secondary mt-1">
+                {businessAssociateAgreement ? businessAssociateAgreement.fileName : __("No business associate agreement available")}
+              </p>
+              {(businessAssociateAgreement?.validFrom || businessAssociateAgreement?.validUntil) && (
+                <p className="text-xs text-txt-secondary mt-1">
+                  {__("Valid")}
+                  {businessAssociateAgreement.validFrom &&
+                    ` ${__("from")} ${new Date(businessAssociateAgreement.validFrom).toLocaleDateString()}`
+                  }
+                  {businessAssociateAgreement.validUntil &&
+                    ` ${__("until")} ${new Date(businessAssociateAgreement.validUntil).toLocaleDateString()}`
+                  }
+                </p>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              {businessAssociateAgreement ? (
+                <>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={() => downloadFile(businessAssociateAgreement.fileUrl, businessAssociateAgreement.fileName)}
+                  >
+                    {__("Download PDF")}
+                  </Button>
+                  <EditBusinessAssociateAgreementDialog
+                    vendorId={vendor.id}
+                    agreement={{
+                      validFrom: businessAssociateAgreement.validFrom,
+                      validUntil: businessAssociateAgreement.validUntil,
+                    }}
+                    onSuccess={() => window.location.reload()}
+                  >
+                    <Button variant="quaternary" icon={IconPencil} />
+                  </EditBusinessAssociateAgreementDialog>
+                  <DeleteBusinessAssociateAgreementDialog
+                    vendorId={vendor.id}
+                    fileName={businessAssociateAgreement.fileName}
+                    onSuccess={() => window.location.reload()}
+                  >
+                    <Button variant="quaternary" icon={IconTrashCan} />
+                  </DeleteBusinessAssociateAgreementDialog>
+                </>
+              ) : (
+                <UploadBusinessAssociateAgreementDialog
+                  vendorId={vendor.id}
+                  onSuccess={() => window.location.reload()}
+                >
+                  <Button variant="secondary" icon={IconPlusLarge}>
+                    {__("Upload")}
+                  </Button>
+                </UploadBusinessAssociateAgreementDialog>
+              )}
+            </div>
+          </div>
+        </Card>
+      </div>
+
       {/* Submit */}
       <div className="flex justify-end">
         <Button type="submit" disabled={isSubmitting}>

apps/console/src/pages/organizations/vendors/tabs/__generated__/VendorOverviewTabBusinessAssociateAgreementFragment.graphql.ts

@@ -0,0 +1,95 @@
+/**
+ * @generated SignedSource<<ff109a0e0313323fe9b81a4c22bde7ff>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ReaderFragment } from 'relay-runtime';
+import { FragmentRefs } from "relay-runtime";
+export type VendorOverviewTabBusinessAssociateAgreementFragment$data = {
+  readonly businessAssociateAgreement: {
+    readonly createdAt: any;
+    readonly fileName: string;
+    readonly fileUrl: string;
+    readonly id: string;
+    readonly validFrom: any | null | undefined;
+    readonly validUntil: any | null | undefined;
+  } | null | undefined;
+  readonly " $fragmentType": "VendorOverviewTabBusinessAssociateAgreementFragment";
+};
+export type VendorOverviewTabBusinessAssociateAgreementFragment$key = {
+  readonly " $data"?: VendorOverviewTabBusinessAssociateAgreementFragment$data;
+  readonly " $fragmentSpreads": FragmentRefs<"VendorOverviewTabBusinessAssociateAgreementFragment">;
+};
+
+const node: ReaderFragment = {
+  "argumentDefinitions": [],
+  "kind": "Fragment",
+  "metadata": null,
+  "name": "VendorOverviewTabBusinessAssociateAgreementFragment",
+  "selections": [
+    {
+      "alias": null,
+      "args": null,
+      "concreteType": "VendorBusinessAssociateAgreement",
+      "kind": "LinkedField",
+      "name": "businessAssociateAgreement",
+      "plural": false,
+      "selections": [
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "fileName",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "fileUrl",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "validFrom",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "validUntil",
+          "storageKey": null
+        },
+        {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "createdAt",
+          "storageKey": null
+        }
+      ],
+      "storageKey": null
+    }
+  ],
+  "type": "Vendor",
+  "abstractKey": null
+};
+
+(node as any).hash = "5f45b3392cbce2a58d3d68932ec68f88";
+
+export default node;