From c9186a9b653cd19eb0b82651750ac9ce9d4816a4 Mon Sep 17 00:00:00 2001
From: Herrera <eduardo.herrera@quartech.com>
Date: Thu, 5 Mar 2026 15:08:42 -0800
Subject: [PATCH 1/3] PSP-7782 : Document Manager: document selection and
 uploading -MP(UI ONLY)

---
 .../DocumentUploadContainer.test.tsx          |   4 +-
 .../documentUpload/DocumentUploadForm.tsx     |   4 +-
 .../documentUpload/SelectedDocumentHeader.tsx |  46 ++-
 .../documentUpload/SelectedDocumentRow.tsx    |  12 +-
 .../DocumentUploadReplaceContainer.test.tsx   |  66 ++++
 .../DocumentUploadReplaceContainer.tsx        |  38 ++
 .../DocumentUploadReplaceView.test.tsx        | 110 ++++++
 .../DocumentUploadReplaceView.tsx             |  69 ++++
 .../DocumentUploadReplaceView.test.tsx.snap   | 328 ++++++++++++++++++
 .../frontend/src/features/documents/models.ts |  13 +-
 10 files changed, 684 insertions(+), 6 deletions(-)
 create mode 100644 source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
 create mode 100644 source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
 create mode 100644 source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
 create mode 100644 source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
 create mode 100644 source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap

diff --git a/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.test.tsx b/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.test.tsx
index 9e40bb1b07..3ea9132664 100644
--- a/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/DocumentUploadContainer.test.tsx
@@ -73,6 +73,8 @@ const mockDocumentRelationshipApi = {
 vi.mock('@/features/documents/hooks/useDocumentRelationshipProvider');
 vi.mocked(useDocumentRelationshipProvider).mockReturnValue(mockDocumentRelationshipApi);
 
+const mockFile = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
+
 describe('DocumentUploadContainer component', () => {
   let viewProps: IDocumentUploadFormProps | undefined;
   const View: React.FC<IDocumentUploadFormProps> = props => {
@@ -175,7 +177,7 @@ describe('DocumentUploadContainer component', () => {
         '',
         [],
       );
-      formDocument.file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
+      formDocument.setFile(mockFile);
 
       const batchRequest = new BatchUploadFormModel();
       batchRequest.documents.push(formDocument);
diff --git a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.tsx b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.tsx
index 54672b18e8..1ab425a507 100644
--- a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.tsx
+++ b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.tsx
@@ -48,8 +48,9 @@ export const DocumentUploadForm: React.FunctionComponent<IDocumentUploadFormProp
         documentStatusOptions[0]?.value?.toString(),
         initialDocumentType ?? '',
         [],
+        file,
       );
-      formDocument.file = file;
+
       push(formDocument);
     }
 
@@ -89,6 +90,7 @@ export const DocumentUploadForm: React.FunctionComponent<IDocumentUploadFormProp
                       multiple
                     />
                   </SectionField>
+
                   <StyledScrollable>
                     {formikProps.values.documents.map((formDocument, index) => (
                       <SectionField
diff --git a/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx b/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
index 05e0051a6e..02439c67e6 100644
--- a/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
+++ b/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
@@ -4,6 +4,7 @@ import truncate from 'lodash/truncate';
 import { useEffect, useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaCheck, FaTrash } from 'react-icons/fa';
+import { TbReplace, TbReplaceOff } from 'react-icons/tb';
 import styled, { useTheme } from 'styled-components';
 
 import { StyledRemoveIconButton } from '@/components/common/buttons';
@@ -15,6 +16,8 @@ import { exists } from '@/utils';
 import { withNameSpace } from '@/utils/formUtils';
 
 import { BatchUploadFormModel, DocumentUploadFormData } from '../models';
+import DocumentUploadReplaceContainer from './documentUploadReplace/DocumentUploadReplaceContainer';
+import DocumentUploadReplaceView from './documentUploadReplace/DocumentUploadReplaceView';
 
 export interface ISelectedDocumentHeaderProps {
   // props
@@ -26,6 +29,9 @@ export interface ISelectedDocumentHeaderProps {
   document: DocumentUploadFormData;
   documentTypes: ApiGen_Concepts_DocumentType[];
   documentStatusOptions: SelectOption[];
+  replacingFile: boolean;
+  onConfirmDocumentReplace: (file: File) => void;
+  toggleReplacingFile: () => void;
   // event handlers
   onDocumentTypeChange: (changeEvent: React.ChangeEvent<HTMLInputElement>) => void;
   onRemove: (index: number) => void;
@@ -40,6 +46,9 @@ export const SelectedDocumentHeader: React.FunctionComponent<ISelectedDocumentHe
   document,
   documentTypes,
   documentStatusOptions,
+  replacingFile,
+  onConfirmDocumentReplace,
+  toggleReplacingFile,
   onDocumentTypeChange,
   onRemove,
 }) => {
@@ -98,15 +107,50 @@ export const SelectedDocumentHeader: React.FunctionComponent<ISelectedDocumentHe
           <span>File {index + 1}:</span>
           <span className="ml-4">{truncate(document.file.name, { length: 50 })}</span>
           <FaCheck className="ml-2" size="1.6rem" color={theme.css.uploadFileCheckColor} />
+          {!replacingFile && (
+            <TbReplace
+              className="ml-2"
+              style={{ cursor: 'pointer' }}
+              size="1.6rem"
+              color={theme.css.pimsGrey80}
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleReplacingFile();
+              }}
+            />
+          )}
+          {replacingFile && (
+            <TbReplaceOff
+              className="ml-2"
+              style={{ cursor: 'pointer' }}
+              size="1.6rem"
+              color={theme.css.pimsRed80}
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleReplacingFile();
+              }}
+            />
+          )}
         </Col>
       </Row>
+
+      {replacingFile && (
+        <DocumentUploadReplaceContainer
+          onReplaceDocumentFile={onConfirmDocumentReplace}
+          onCancelReplaceFile={() => toggleReplacingFile()}
+          View={DocumentUploadReplaceView}
+        ></DocumentUploadReplaceContainer>
+      )}
+
       <StyledRow className={clsx('ml-0', className)}>
         <Col md="5">
           <SectionField label={null} contentWidth={{ xs: 12 }} required>
             <Select
               className="mb-0"
               data-testid={withNameSpace(namespace, 'document-type')}
-              placeholder={documentTypeOptions.length > 1 ? 'Select Document type' : undefined}
+              placeholder={documentTypeOptions.length > 1 ? 'Select Document type' : ''}
               field={withNameSpace(namespace, 'documentTypeId')}
               options={documentTypeOptions}
               onChange={onDocumentTypeChange}
diff --git a/source/frontend/src/features/documents/documentUpload/SelectedDocumentRow.tsx b/source/frontend/src/features/documents/documentUpload/SelectedDocumentRow.tsx
index 47c96cab7f..fb263cf9f1 100644
--- a/source/frontend/src/features/documents/documentUpload/SelectedDocumentRow.tsx
+++ b/source/frontend/src/features/documents/documentUpload/SelectedDocumentRow.tsx
@@ -1,5 +1,5 @@
 import { FormikErrors, FormikProps, getIn } from 'formik';
-import { ChangeEvent, useCallback } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 
 import { SelectOption } from '@/components/common/form';
 import { Section } from '@/components/common/Section/Section';
@@ -37,6 +37,8 @@ export const SelectedDocumentRow: React.FunctionComponent<ISelectedDocumentRowPr
   onRemove,
 }) => {
   const { setFieldValue } = formikProps;
+  const [replacingFile, setReplacingFile] = useState<boolean>(false);
+
   const errors: FormikErrors<DocumentUploadFormData> =
     getIn(formikProps.errors, namespace ?? '') || {};
 
@@ -67,6 +69,11 @@ export const SelectedDocumentRow: React.FunctionComponent<ISelectedDocumentRowPr
     [documentTypes, updateDocumentType],
   );
 
+  const onConfirmDocumentReplace = (file: File) => {
+    document.setFile(file);
+    setReplacingFile(!replacingFile);
+  };
+
   return (
     <Section
       header={
@@ -79,6 +86,9 @@ export const SelectedDocumentRow: React.FunctionComponent<ISelectedDocumentRowPr
           documentStatusOptions={documentStatusOptions}
           onRemove={onRemove}
           onDocumentTypeChange={onDocumentTypeChange}
+          replacingFile={replacingFile}
+          toggleReplacingFile={() => setReplacingFile(!replacingFile)}
+          onConfirmDocumentReplace={onConfirmDocumentReplace}
         />
       }
       isStyledHeader
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
new file mode 100644
index 0000000000..6ebc0ae50b
--- /dev/null
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
@@ -0,0 +1,66 @@
+import { act, render, RenderOptions } from '@/utils/test-utils';
+import DocumentUploadReplaceContainer, {
+  IDocumentUploadReplaceContainerProps,
+} from './DocumentUploadReplaceContainer';
+import { IDocumentUploadReplaceViewProps } from './DocumentUploadReplaceView';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+let viewProps: IDocumentUploadReplaceViewProps | undefined;
+const TestView: React.FC<IDocumentUploadReplaceViewProps> = props => {
+  viewProps = props;
+  return <span>Content Rendered</span>;
+};
+
+const onReplaceDocumentFile = vi.fn();
+const onCancelReplaceFile = vi.fn();
+
+describe('document upload replace container component', () => {
+  const setup = async (
+    renderOptions: RenderOptions & {
+      props?: Partial<IDocumentUploadReplaceContainerProps>;
+    } = {},
+  ) => {
+    const utils = render(
+      <DocumentUploadReplaceContainer
+        onReplaceDocumentFile={onReplaceDocumentFile}
+        onCancelReplaceFile={onCancelReplaceFile}
+        View={TestView}
+      ></DocumentUploadReplaceContainer>,
+      {
+        ...renderOptions,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+
+  beforeEach(() => {
+    viewProps = undefined;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the underlying form', async () => {
+    const { getByText } = await setup();
+
+    expect(getByText(/Content Rendered/)).toBeVisible();
+  });
+
+  it('handles cancel replacement', async () => {
+    const {} = await setup();
+
+    await act(async () => viewProps.onCancelReplace());
+    expect(onCancelReplaceFile).toHaveBeenCalled();
+  });
+
+    it('handles file replacement on confirm', async () => {
+    const {} = await setup();
+
+    await act(async () => viewProps.onConfirmReplace());
+    expect(onReplaceDocumentFile).toHaveBeenCalled();
+  });
+});
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
new file mode 100644
index 0000000000..07e8ad9055
--- /dev/null
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import { exists } from '@/utils/utils';
+
+import { IDocumentUploadReplaceViewProps } from './DocumentUploadReplaceView';
+
+export interface IDocumentUploadReplaceContainerProps {
+  onReplaceDocumentFile: (file: File) => void;
+  onCancelReplaceFile: () => void;
+  View: React.FunctionComponent<IDocumentUploadReplaceViewProps>;
+}
+
+const DocumentUploadReplaceContainer: React.FunctionComponent<
+  IDocumentUploadReplaceContainerProps
+> = ({ onReplaceDocumentFile, onCancelReplaceFile, View }) => {
+  const [replacementFile, setReplacementFile] = useState<File | null>(null);
+
+  const handleOnSelectedFile = (files: File[]) => {
+    if (exists(files) && files.length) {
+      const replacementFile = files[0];
+      setReplacementFile(replacementFile);
+    }
+  };
+
+  return (
+    <View
+      file={replacementFile}
+      onCancelReplace={() => {
+        setReplacementFile(null);
+        onCancelReplaceFile && onCancelReplaceFile();
+      }}
+      onConfirmReplace={() => onReplaceDocumentFile(replacementFile)}
+      onSelectedReplacementFile={handleOnSelectedFile}
+    ></View>
+  );
+};
+
+export default DocumentUploadReplaceContainer;
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
new file mode 100644
index 0000000000..87df6d16a2
--- /dev/null
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
@@ -0,0 +1,110 @@
+import {
+  act,
+  findAllByTestId,
+  fireEvent,
+  render,
+  RenderOptions,
+  userEvent,
+  waitFor,
+  waitForEffects,
+} from '@/utils/test-utils';
+import DocumentUploadReplaceView, {
+  IDocumentUploadReplaceViewProps,
+} from './DocumentUploadReplaceView';
+import { lookupCodesSlice } from '@/store/slices/lookupCodes';
+import { mockLookups } from '@/mocks/lookups.mock';
+
+const onSelectedReplacementFile = vi.fn();
+const onConfirmReplace = vi.fn();
+const onCancelReplace = vi.fn();
+
+describe('Document upload replacement view', () => {
+  const setup = async (
+    renderOptions: RenderOptions & { props?: Partial<IDocumentUploadReplaceViewProps> },
+  ) => {
+    const utils = render(
+      <DocumentUploadReplaceView
+        file={renderOptions?.props?.file ?? null}
+        onSelectedReplacementFile={onSelectedReplacementFile}
+        onConfirmReplace={onConfirmReplace}
+        onCancelReplace={onCancelReplace}
+      />,
+      {
+        ...renderOptions,
+        store: {
+          [lookupCodesSlice.name]: { lookupCodes: mockLookups },
+        },
+      },
+    );
+
+    return {
+      ...utils,
+      useMockAuthentication: true,
+    };
+  };
+
+  let file: File;
+
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders as expected', async () => {
+    const { asFragment } = await setup({});
+    const fragment = await waitFor(() => asFragment());
+    expect(fragment).toMatchSnapshot();
+  });
+
+  it('call on cancel when clicked', async () => {
+    const { getByTitle } = await setup({});
+
+    const cancelButton = getByTitle(/cancel-replace/i);
+    expect(cancelButton).toBeVisible();
+
+    await act(async () => userEvent.click(cancelButton));
+
+    expect(onCancelReplace).toHaveBeenCalled();
+  });
+
+  it('replaces the file when uploaded and confirm replace', async () => {
+    const { getByTitle, getByTestId } = await setup({
+      props: { file: file },
+    });
+
+    const replaceButton = getByTitle(/confirm-replace/i);
+    expect(replaceButton).toBeVisible();
+    expect(replaceButton).not.toBeDisabled();
+    expect(getByTestId('file-name')).toHaveTextContent('test.png');
+
+    await act(async () => userEvent.click(replaceButton));
+
+    expect(onConfirmReplace).toHaveBeenCalled();
+  });
+
+  it('prepares the file replacement', async () => {
+    const { getByTitle, getByTestId } = await setup({});
+
+    const replaceButton = getByTitle(/confirm-replace/i);
+    expect(replaceButton).toBeVisible();
+    expect(replaceButton).toBeDisabled();
+
+    // get the upload button
+    const uploader = getByTestId('upload-input');
+    console.log(uploader);
+
+    // simulate upload event and wait until finish
+    await act(async () => {
+      fireEvent.change(uploader, {
+        target: { files: [file] },
+      });
+    });
+    await waitForEffects();
+
+    expect(onSelectedReplacementFile).toHaveBeenCalled();
+  });
+});
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
new file mode 100644
index 0000000000..8cd54a1c88
--- /dev/null
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
@@ -0,0 +1,69 @@
+import clsx from 'classnames';
+import { FunctionComponent } from 'react';
+import { Col, Row } from 'react-bootstrap';
+
+import { Button } from '@/components/common/buttons';
+import FileDragAndDrop from '@/components/common/form/FileDragAndDrop';
+import ValidDocumentExtensions from '@/constants/ValidDocumentExtensions';
+import { exists } from '@/utils/utils';
+
+export interface IDocumentUploadReplaceViewProps {
+  className?: string;
+  file: File | null;
+  onSelectedReplacementFile: (files: File[]) => void;
+  onConfirmReplace: () => void;
+  onCancelReplace: () => void;
+}
+
+const DocumentUploadReplaceView: FunctionComponent<IDocumentUploadReplaceViewProps> = ({
+  file,
+  className,
+  onConfirmReplace,
+  onCancelReplace,
+  onSelectedReplacementFile,
+}) => {
+  return (
+    <div>
+      <Row className={clsx('no-gutters', 'pb-3', className)}>
+        <Col>
+          <FileDragAndDrop
+            onSelectFiles={onSelectedReplacementFile}
+            validExtensions={ValidDocumentExtensions}
+            multiple={false}
+          />
+        </Col>
+      </Row>
+
+      <Row className={clsx('no-gutters', 'pb-3', className)}>
+        <Col md="8">
+          <p>
+            Replace with file? : <span data-testid="file-name">{file?.name ?? ''}</span>
+          </p>
+        </Col>
+        <Col md="2">
+          <Button
+            title="cancel-replace"
+            variant={'secondary'}
+            onClick={onCancelReplace}
+            data-testid="cancel-replace-button"
+          >
+            {'Cancel'}
+          </Button>
+        </Col>
+        <Col md="2">
+          <Button
+            title="confirm-replace"
+            variant={'primary'}
+            onClick={onConfirmReplace}
+            data-testid="ok-replace-button"
+            disabled={!exists(file)}
+          >
+            {'Replace'}
+          </Button>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default DocumentUploadReplaceView;
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap
new file mode 100644
index 0000000000..27f1aecfaf
--- /dev/null
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap
@@ -0,0 +1,328 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Document upload replacement view > renders as expected 1`] = `
+<DocumentFragment>
+  <div
+    class="Toastify"
+  />
+  <div />
+  .c4.btn {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0.4rem 1.2rem;
+  border: 0.2rem solid transparent;
+  border-radius: 0.4rem;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 1.8rem;
+  font-family: 'BCSans','Noto Sans',Verdana,Arial,sans-serif;
+  font-weight: 700;
+  -webkit-letter-spacing: 0.1rem;
+  -moz-letter-spacing: 0.1rem;
+  -ms-letter-spacing: 0.1rem;
+  letter-spacing: 0.1rem;
+  cursor: pointer;
+}
+
+.c4.btn .Button__value {
+  width: auto;
+}
+
+.c4.btn:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.c4.btn:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #2E5DD7;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+.c4.btn.btn-primary {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-primary:hover,
+.c4.btn.btn-primary:active,
+.c4.btn.btn-primary:focus {
+  background-color: #1E5189;
+}
+
+.c4.btn.btn-secondary {
+  color: #013366;
+  background: none;
+  border-color: #013366;
+}
+
+.c4.btn.btn-secondary:hover,
+.c4.btn.btn-secondary:active,
+.c4.btn.btn-secondary:focus {
+  color: #FFFFFF;
+  background-color: #013366;
+}
+
+.c4.btn.btn-info {
+  color: #9F9D9C;
+  border: none;
+  background: none;
+  padding-left: 0.6rem;
+  padding-right: 0.6rem;
+}
+
+.c4.btn.btn-info:hover,
+.c4.btn.btn-info:active,
+.c4.btn.btn-info:focus {
+  color: var(--surface-color-primary-button-hover);
+  background: none;
+}
+
+.c4.btn.btn-light {
+  color: #FFFFFF;
+  background-color: #606060;
+  border: none;
+}
+
+.c4.btn.btn-light:hover,
+.c4.btn.btn-light:active,
+.c4.btn.btn-light:focus {
+  color: #FFFFFF;
+  background-color: #606060;
+}
+
+.c4.btn.btn-dark {
+  color: #FFFFFF;
+  background-color: #474543;
+  border: none;
+}
+
+.c4.btn.btn-dark:hover,
+.c4.btn.btn-dark:active,
+.c4.btn.btn-dark:focus {
+  color: #FFFFFF;
+  background-color: #474543;
+}
+
+.c4.btn.btn-danger {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-danger:hover,
+.c4.btn.btn-danger:active,
+.c4.btn.btn-danger:focus {
+  color: #FFFFFF;
+  background-color: #CE3E39;
+}
+
+.c4.btn.btn-warning {
+  color: #FFFFFF;
+  background-color: #FCBA19;
+  border-color: #FCBA19;
+}
+
+.c4.btn.btn-warning:hover,
+.c4.btn.btn-warning:active,
+.c4.btn.btn-warning:focus {
+  color: #FFFFFF;
+  border-color: #FCBA19;
+  background-color: #FCBA19;
+}
+
+.c4.btn.btn-link {
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: var(--surface-color-primary-button-default);
+  background: none;
+  border: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  min-height: 2.5rem;
+  line-height: 3rem;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-letter-spacing: unset;
+  -moz-letter-spacing: unset;
+  -ms-letter-spacing: unset;
+  letter-spacing: unset;
+  text-align: left;
+  padding: 0;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c4.btn.btn-link:hover,
+.c4.btn.btn-link:active,
+.c4.btn.btn-link:focus {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  border: none;
+  background: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.c4.btn.btn-link:disabled,
+.c4.btn.btn-link.disabled {
+  color: #9F9D9C;
+  background: none;
+  pointer-events: none;
+}
+
+.c4.btn:disabled,
+.c4.btn:disabled:hover {
+  color: #9F9D9C;
+  background-color: #EDEBE9;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.c4.Button .Button__icon {
+  margin-right: 1.6rem;
+}
+
+.c4.Button--icon-only:focus {
+  outline: none;
+}
+
+.c4.Button--icon-only .Button__icon {
+  margin-right: 0;
+}
+
+.c0 {
+  border: 1px solid #606060;
+  border-style: dashed;
+  height: 10rem;
+  line-height: 10rem;
+  text-align: center;
+}
+
+.c1 {
+  width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: normal;
+}
+
+.c2 {
+  display: inline-block;
+  color: var(--surface-color-primary-button-default);
+  cursor: pointer;
+}
+
+.c2:hover {
+  color: var(--surface-color-primary-button-hover);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c3 {
+  display: none;
+}
+
+<div>
+    <div
+      class="no-gutters pb-3 row"
+    >
+      <div
+        class="col"
+      >
+        <div>
+          <div
+            class="c0"
+          >
+            <div
+              class="c1"
+            >
+              Drag files here to attach or 
+              <label
+                class="c2"
+              >
+                Browse
+                <input
+                  accept=".txt,.pdf,.docx,.doc,.xlsx,.xls,.html,.odt,.png,.jpg,.bmp,.tif,.tiff,.jpeg,.gif,.shp,.gml,.kml,.kmz,.msg"
+                  class="c3"
+                  data-testid="upload-input"
+                  id="uploadInput"
+                  name="documentFile"
+                  type="file"
+                />
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="no-gutters pb-3 row"
+    >
+      <div
+        class="col-md-8"
+      >
+        <p>
+          Replace with file? : 
+          <span
+            data-testid="file-name"
+          />
+        </p>
+      </div>
+      <div
+        class="col-md-2"
+      >
+        <button
+          class="c4 Button btn btn-secondary"
+          data-testid="cancel-replace-button"
+          title="cancel-replace"
+          type="button"
+        >
+          <div
+            class="Button__value"
+          >
+            Cancel
+          </div>
+        </button>
+      </div>
+      <div
+        class="col-md-2"
+      >
+        <button
+          class="c4 Button Button--disabled btn btn-primary"
+          data-testid="ok-replace-button"
+          disabled=""
+          title="confirm-replace"
+          type="button"
+        >
+          <div
+            class="Button__value"
+          >
+            Replace
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/source/frontend/src/features/documents/models.ts b/source/frontend/src/features/documents/models.ts
index cc2bcb3df3..8ae4654562 100644
--- a/source/frontend/src/features/documents/models.ts
+++ b/source/frontend/src/features/documents/models.ts
@@ -44,19 +44,28 @@ export class DocumentUploadFormData {
   public documentMetadata: Record<string, string>;
   public isDocumentTypeChanged = false;
   public mayanMetadata: ApiGen_Mayan_DocumentTypeMetadataType[];
-  public file: File | null;
+  private _file: File | null;
 
   public constructor(
     initialStatus: string,
     documentType: string,
     metadata: ApiGen_Mayan_DocumentTypeMetadataType[],
+    file: File = null,
   ) {
     this.documentStatusCode = initialStatus;
     this.documentTypeId = documentType;
-    this.file = null;
+    this.setFile(file);
     this.setMayanMetadata(metadata);
   }
 
+  get file(): File {
+    return this._file;
+  }
+
+  setFile(file: File): void {
+    this._file = file;
+  }
+
   public setMayanMetadata(metadata: ApiGen_Mayan_DocumentTypeMetadataType[]) {
     this.mayanMetadata = metadata;
     this.documentMetadata = {};

From c14494ae1819e16b45a1c960deab9d77d863f768 Mon Sep 17 00:00:00 2001
From: Herrera <eduardo.herrera@quartech.com>
Date: Fri, 6 Mar 2026 10:29:05 -0800
Subject: [PATCH 2/3] - test updates

---
 .../DocumentUploadForm.test.tsx               | 28 ++++++++++++++++++-
 .../documentUpload/SelectedDocumentHeader.tsx |  3 ++
 .../DocumentUploadReplaceContainer.test.tsx   |  1 +
 .../DocumentUploadReplaceContainer.tsx        |  4 ++-
 .../DocumentUploadReplaceView.test.tsx        |  1 +
 .../DocumentUploadReplaceView.tsx             |  4 ++-
 .../DocumentUploadReplaceView.test.tsx.snap   |  4 ++-
 7 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
index 36b42f482f..ff395a6ccd 100644
--- a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
@@ -7,7 +7,7 @@ import { mockDocumentTypesResponse } from '@/mocks/documents.mock';
 import { mockLookups } from '@/mocks/lookups.mock';
 import { ApiGen_Mayan_DocumentTypeMetadataType } from '@/models/api/generated/ApiGen_Mayan_DocumentTypeMetadataType';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
-import { act, fireEvent, render, RenderOptions, screen } from '@/utils/test-utils';
+import { act, findByTestId, fireEvent, queryByTestId, render, RenderOptions, screen, userEvent, waitForEffects } from '@/utils/test-utils';
 
 import { BatchUploadFormModel, DocumentUploadFormData } from '../models';
 import DocumentUploadForm from './DocumentUploadForm';
@@ -140,6 +140,32 @@ describe('DocumentUploadView component', () => {
     expect(onUploadDocument).toHaveBeenCalled();
   });
 
+    it('should enable/disable document replace when replace button clicked', async () => {
+    const { getByTestId, queryByTestId, formikRef } = setup({ initialValues });
+
+    expect(formikRef.current).not.toBeNull();
+
+    // get the upload button
+    const uploader = getByTestId('upload-input');
+
+    // simulate upload event and wait until finish
+    await act(async () => {
+      fireEvent.change(uploader, {
+        target: { files: [file] },
+      });
+    });
+
+    const enableReplaceBtn = getByTestId('enable-replace-btn-0');
+    await act(async () => userEvent.click(enableReplaceBtn));
+    await waitForEffects();
+    expect(getByTestId(`doc-replacement[0]`)).toBeInTheDocument();
+
+    const disableReplaceBtn = getByTestId('cancel-replace-btn-0');
+    await act(async () => userEvent.click(disableReplaceBtn));
+    await waitForEffects();
+    expect(queryByTestId(`doc-replacement[0]`)).not.toBeInTheDocument();
+  });
+
   it('should display the number of attached files', async () => {
     const { getByTestId, formikRef } = setup({ initialValues });
 
diff --git a/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx b/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
index 02439c67e6..d291f67823 100644
--- a/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
+++ b/source/frontend/src/features/documents/documentUpload/SelectedDocumentHeader.tsx
@@ -113,6 +113,7 @@ export const SelectedDocumentHeader: React.FunctionComponent<ISelectedDocumentHe
               style={{ cursor: 'pointer' }}
               size="1.6rem"
               color={theme.css.pimsGrey80}
+              data-testid={`enable-replace-btn-${index}`}
               onClick={e => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -126,6 +127,7 @@ export const SelectedDocumentHeader: React.FunctionComponent<ISelectedDocumentHe
               style={{ cursor: 'pointer' }}
               size="1.6rem"
               color={theme.css.pimsRed80}
+              data-testid={`cancel-replace-btn-${index}`}
               onClick={e => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -138,6 +140,7 @@ export const SelectedDocumentHeader: React.FunctionComponent<ISelectedDocumentHe
 
       {replacingFile && (
         <DocumentUploadReplaceContainer
+          index={index}
           onReplaceDocumentFile={onConfirmDocumentReplace}
           onCancelReplaceFile={() => toggleReplacingFile()}
           View={DocumentUploadReplaceView}
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
index 6ebc0ae50b..e66eb39ec7 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.test.tsx
@@ -22,6 +22,7 @@ describe('document upload replace container component', () => {
   ) => {
     const utils = render(
       <DocumentUploadReplaceContainer
+        index={renderOptions?.props?.index ?? 0}
         onReplaceDocumentFile={onReplaceDocumentFile}
         onCancelReplaceFile={onCancelReplaceFile}
         View={TestView}
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
index 07e8ad9055..01422f5053 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceContainer.tsx
@@ -5,6 +5,7 @@ import { exists } from '@/utils/utils';
 import { IDocumentUploadReplaceViewProps } from './DocumentUploadReplaceView';
 
 export interface IDocumentUploadReplaceContainerProps {
+  index: number;
   onReplaceDocumentFile: (file: File) => void;
   onCancelReplaceFile: () => void;
   View: React.FunctionComponent<IDocumentUploadReplaceViewProps>;
@@ -12,7 +13,7 @@ export interface IDocumentUploadReplaceContainerProps {
 
 const DocumentUploadReplaceContainer: React.FunctionComponent<
   IDocumentUploadReplaceContainerProps
-> = ({ onReplaceDocumentFile, onCancelReplaceFile, View }) => {
+> = ({ index, onReplaceDocumentFile, onCancelReplaceFile, View }) => {
   const [replacementFile, setReplacementFile] = useState<File | null>(null);
 
   const handleOnSelectedFile = (files: File[]) => {
@@ -25,6 +26,7 @@ const DocumentUploadReplaceContainer: React.FunctionComponent<
   return (
     <View
       file={replacementFile}
+      index={index}
       onCancelReplace={() => {
         setReplacementFile(null);
         onCancelReplaceFile && onCancelReplaceFile();
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
index 87df6d16a2..be157ab899 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
@@ -24,6 +24,7 @@ describe('Document upload replacement view', () => {
   ) => {
     const utils = render(
       <DocumentUploadReplaceView
+        index={renderOptions?.props?.index ?? 0}
         file={renderOptions?.props?.file ?? null}
         onSelectedReplacementFile={onSelectedReplacementFile}
         onConfirmReplace={onConfirmReplace}
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
index 8cd54a1c88..0fa7bcd0b7 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.tsx
@@ -10,6 +10,7 @@ import { exists } from '@/utils/utils';
 export interface IDocumentUploadReplaceViewProps {
   className?: string;
   file: File | null;
+  index: number;
   onSelectedReplacementFile: (files: File[]) => void;
   onConfirmReplace: () => void;
   onCancelReplace: () => void;
@@ -18,12 +19,13 @@ export interface IDocumentUploadReplaceViewProps {
 const DocumentUploadReplaceView: FunctionComponent<IDocumentUploadReplaceViewProps> = ({
   file,
   className,
+  index,
   onConfirmReplace,
   onCancelReplace,
   onSelectedReplacementFile,
 }) => {
   return (
-    <div>
+    <div data-testid={`doc-replacement[${index}]`}>
       <Row className={clsx('no-gutters', 'pb-3', className)}>
         <Col>
           <FileDragAndDrop
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap
index 27f1aecfaf..4861bea092 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/__snapshots__/DocumentUploadReplaceView.test.tsx.snap
@@ -243,7 +243,9 @@ exports[`Document upload replacement view > renders as expected 1`] = `
   display: none;
 }
 
-<div>
+<div
+    data-testid="doc-replacement[0]"
+  >
     <div
       class="no-gutters pb-3 row"
     >

From 03d206d7ef0e09fc790b839e7b052e6a770611e6 Mon Sep 17 00:00:00 2001
From: Herrera <eduardo.herrera@quartech.com>
Date: Thu, 12 Mar 2026 11:24:47 -0700
Subject: [PATCH 3/3] - linting

---
 .../documents/documentUpload/DocumentUploadForm.test.tsx        | 2 +-
 .../documentUploadReplace/DocumentUploadReplaceView.test.tsx    | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
index ff395a6ccd..7214d9ce54 100644
--- a/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/DocumentUploadForm.test.tsx
@@ -7,7 +7,7 @@ import { mockDocumentTypesResponse } from '@/mocks/documents.mock';
 import { mockLookups } from '@/mocks/lookups.mock';
 import { ApiGen_Mayan_DocumentTypeMetadataType } from '@/models/api/generated/ApiGen_Mayan_DocumentTypeMetadataType';
 import { lookupCodesSlice } from '@/store/slices/lookupCodes';
-import { act, findByTestId, fireEvent, queryByTestId, render, RenderOptions, screen, userEvent, waitForEffects } from '@/utils/test-utils';
+import { act, fireEvent, render, RenderOptions, screen, userEvent, waitForEffects } from '@/utils/test-utils';
 
 import { BatchUploadFormModel, DocumentUploadFormData } from '../models';
 import DocumentUploadForm from './DocumentUploadForm';
diff --git a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
index be157ab899..68f2f509c6 100644
--- a/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
+++ b/source/frontend/src/features/documents/documentUpload/documentUploadReplace/DocumentUploadReplaceView.test.tsx
@@ -1,6 +1,5 @@
 import {
   act,
-  findAllByTestId,
   fireEvent,
   render,
   RenderOptions,