first commit

src/Components/Document/DocEditPage.js

@@ -0,0 +1,606 @@
+import { useState, useContext, useEffect } from "react";
+import NewYorkCaption from "./captionHeaders/newYorkCaption.js";
+import NewJerseyCaption from "./captionHeaders/newJerseyCaption.js";
+import { useParams } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import EditElement from "../../pageElements/EditElement";
+import { db } from "../../firebase";
+import {
+  updateDoc,
+  onSnapshot,
+  doc,
+  getDoc,
+  increment,
+} from "firebase/firestore";
+import { AppContext } from "../../Hooks/useContext/appContext";
+import Button from "../../pageElements/Button";
+import ConfirmModal from "../Modals/ConfirmModal";
+import LoadingSpinner from "../../pageElements/LoadingSpinner";
+import { scrubAll } from "../../Utils/String";
+import { docEditCopy } from "../../Constants/Copy/docEditCopy.js";
+import "../../styles/docedit-page.scss";
+
+const DocEditPage = () => {
+  const { documentId, responseGenerations, caseId, documentType } = useParams();
+  const navigate = useNavigate();
+  const [parsedRogs, setParsedRogs] = useState();
+  const [responses, setResponses] = useState([1]);
+  const [fetchedCase, setFetchedCase] = useState();
+  const [showInputEle, setShowInputEle] = useState(true);
+  const [document, setDocument] = useState(null);
+  const { appState } = useContext(AppContext);
+  const { group } = appState;
+  const appUserId = group ? group.appUserId : null;
+  const [docId, setDocId] = useState(documentId);
+  const [saveDocumentId, setSaveDocumentId] = useState("");
+  const [showSaveModal, setShowSaveModal] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [responsesCreated, setResponsesCreated] = useState(
+    parseInt(responseGenerations)
+  );
+  const [index, setIndex] = useState(0);
+
+  // For document generation:
+  const state = group ? group?.state : null;
+  const lawFirm = group ? group?.firm : null;
+  const streetAdd = group ? group?.streetAddress : null;
+  const city = group ? group.city : null;
+  const usState = group ? group.state : null;
+  const zipCode = group ? group.zipCode : null;
+  const telephone = group ? group.telephone : null;
+
+  const displayCopy =
+    state === "New York"
+      ? docEditCopy.NewYork
+      : state === "New Jersey"
+      ? docEditCopy.NewJersey
+      : docEditCopy.NewYork;
+
+  const headerPicker = () => {
+    console.log("state", state);
+    switch (state) {
+      case "New York":
+        return (
+          <NewYorkCaption
+            displayCopy={displayCopy}
+            fetchedCase={fetchedCase}
+            onScrollClick={onScrollClick}
+          />
+        );
+      case "New Jersey":
+        return (
+          <NewJerseyCaption
+            displayCopy={displayCopy}
+            fetchedCase={fetchedCase}
+            onScrollClick={onScrollClick}
+          />
+        );
+      default:
+        return (
+          <NewYorkCaption
+            displayCopy={displayCopy}
+            fetchedCase={fetchedCase}
+            onScrollClick={onScrollClick}
+          />
+        );
+    }
+  };
+
+  const baseUrl = "http://localhost:4000";
+
+  const headerString =
+    documentType === "interrogatories" ? (
+      "Response to Interrogatories"
+    ) : documentType === "admissions" ? (
+      "Response to Request for Admissions"
+    ) : documentType === "production" ? (
+      "Response to Request for Production"
+    ) : documentType === "combined-numbered" ? (
+      "Response to Interrogatories and Request for Production"
+    ) : (
+      <></>
+    );
+
+  const servingParty =
+    fetchedCase?.clientPosition === "Defendant"
+      ? fetchedCase?.plaintiffParties
+      : fetchedCase?.defendantParties;
+
+  const messages = [
+    "Generating responses. Please be patient, this may take several minutes.",
+    'Do not click "back" on your browser.',
+  ];
+
+  /*
+   *  GET docuement (info) from Firebase
+   * */
+
+  useEffect(() => {
+    if (!appUserId || !docId) {
+      setDocument(null);
+      return;
+    }
+    try {
+      getCase(caseId);
+      getDocument();
+    } catch (err) {
+      console.log("Error:", err);
+    }
+  }, [appUserId, docId, caseId]);
+
+  /*
+   *   GET parsed requests.
+   *   GET completions if already generated
+   * */
+  useEffect(() => {
+    if (!documentId || !documentType) {
+      return;
+    }
+    // TODO: *BUG* still sometimes gens repsonses after first one, maybe state is not updating
+    getParsedRequests(documentId, documentType);
+    if (responsesCreated > 0) {
+      getCompletions(documentId)
+        .then((data) => {
+          const resp = data[0].responses.map((item, index) => {
+            // NEVER CHANGE THIS:
+            return { showInputEle: false, resp: item.text, index: index };
+          });
+          setResponses(resp);
+        })
+        .catch((err) => console.log(err));
+    }
+  }, [documentId]);
+
+  /*
+   *   If response completions = 0, generate responses
+   */
+
+  useEffect(() => {
+    if (responsesCreated > 0) {
+      return;
+    }
+    if (responsesCreated < 1) {
+      try {
+        const res = generateResponses(documentId);
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }, [responsesCreated, documentId]);
+
+  async function getCase(parentCaseId) {
+    try {
+      const docRef = doc(db, "cases", `${parentCaseId}`);
+      const docSnap = await getDoc(docRef);
+      if (docSnap.exists()) {
+        const _case = docSnap.data();
+        _case.id = docSnap._key.path.segments[1];
+        setFetchedCase(_case);
+      } else {
+        console.log("DB item does not exist");
+      }
+    } catch (error) {
+      console.log(`A system error has occurred: ${error}`);
+    }
+  }
+
+  function getDocument() {
+    const docRef = doc(db, "documents", `${docId}`);
+    const unsub = onSnapshot(docRef, (snapshot) => {
+      if (snapshot.exists() && snapshot.data().ownerId === appUserId) {
+        setDocument({ ...snapshot.data(), documentId: snapshot.id });
+      } else {
+        setDocument(null);
+      }
+    });
+    return unsub;
+  }
+
+  async function getParsedRequests(documentId) {
+    if (documentId) {
+      const docType = String(documentType);
+      try {
+        const response = await fetch(
+          `${baseUrl}/getParsedRequests/${documentId}/${docType}`,
+          {
+            method: "GET",
+          }
+        );
+        const res = await response.json();
+
+        const req = res[0].requests;
+        if (req.length > 1) {
+          setParsedRogs(req);
+        }
+      } catch (err) {
+        console.log("Error occured:", err);
+      }
+    }
+  }
+
+  async function getCompletions(docId) {
+    const docType = String(documentType);
+    const response = await fetch(`${baseUrl}/completions/${docId}/${docType}`, {
+      method: "GET",
+    });
+    const req = await response.json();
+    return req;
+  }
+
+  async function generateResponses(documentId) {
+    if (responsesCreated > 0) {
+      return;
+    }
+    const docType = String(documentType);
+    let mode;
+    //TODO: remove isRequests var
+    const isRequests = false;
+
+    try {
+      setIsLoading(true);
+      fetch(
+        `${baseUrl}/genResponseFromArray/${documentId}/${docType}/${isRequests}`,
+        {
+          method: "GET",
+        }
+      )
+        .then(function (response) {
+          return response.json();
+        })
+        .then((data) => {
+          const respArray = data[0].responses;
+          const result = respArray?.map((item, index) => {
+            let obj = {};
+            obj["showInputEle"] = false;
+            obj["resp"] = item.text;
+            obj["index"] = index;
+            return obj;
+          });
+          setResponses(result);
+          updateRespGenerationCount(documentId);
+          setIsLoading(false);
+        })
+        .catch((err) => console.log(err));
+    } catch (err) {
+      console.log("err", err);
+    }
+  }
+
+  async function postEditedResponses() {
+    let obj = {};
+    obj["type"] = documentType;
+    obj["id"] = docId;
+    obj["requests"] = responses;
+    const data = JSON.stringify(obj);
+    try {
+      const response = await fetch(`${baseUrl}/storecompletions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        json: true,
+        body: data,
+      });
+      const res = response;
+      return res;
+    } catch (error) {
+      console.error("Error sending responses to the server:", error);
+    }
+  }
+
+  async function createAndReturnDocx() {
+    const response = await handleCreateDocx();
+    if (response.status === 200) {
+      setTimeout(getDocx, 5000);
+      setTimeout(cleanUpDocx, 10000);
+    }
+  }
+
+  async function cleanUpDocx() {
+    const docId = documentId;
+    const reqType = documentType;
+    fetch(`${baseUrl}/cleanUpDocx/${docId}/${reqType}`, {
+      method: "GET",
+    })
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
+
+  async function getDocx() {
+    const docId = documentId;
+    const reqType = documentType;
+    fetch(`${baseUrl}/getDocx/${docId}/${reqType}`, {
+      method: "GET",
+    }).then((response) => {
+      response.blob().then((blob) => {
+        let url = window.URL.createObjectURL(blob);
+        let a = window.document.createElement("a");
+        a.href = url;
+        a.download = `${reqType}-repsonse.docx`;
+        a.click();
+      });
+    });
+  }
+
+  async function handleCreateDocx() {
+    // TODO: compare to see if any changes made before gen, save those
+    const docId = documentId;
+    const leadAttorneys = fetchedCase?.leadAttorneys
+      ? fetchedCase?.leadAttorneys
+      : null;
+    const reqType = documentType;
+    const captionOne = fetchedCase.caption;
+    const captionTwo = fetchedCase.captionTwo;
+    const caseNum = fetchedCase.caseNumber;
+    const plaintiffs = fetchedCase.plaintiffParties;
+    const defendants = fetchedCase.defendantParties;
+    const venued = fetchedCase.venue;
+    const juris = fetchedCase.jurisdiction;
+    const judge = fetchedCase.judge;
+    const clientPosition = fetchedCase?.clientPosition
+      ? fetchedCase?.clientPosition
+      : null;
+
+    try {
+      const response = await fetch(`${baseUrl}/genDocx/${docId}/${reqType}`, {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          caseCaption1: captionOne,
+          caseCaption2: captionTwo,
+          caseNumber: caseNum,
+          clientPosition: clientPosition,
+          defendant: defendants,
+          firm: lawFirm,
+          firmCity: city,
+          firmState: usState,
+          firmStreetAddress: streetAdd,
+          firmZip: zipCode,
+          judge: judge,
+          jurisdiction: juris,
+          leadAttorneys: leadAttorneys,
+          plaintiff: plaintiffs,
+          state: usState,
+          tel: telephone,
+          venue: venued,
+        }),
+      });
+      return response;
+    } catch (error) {
+      console.error("Error sending responses to the server:", error);
+    }
+  }
+
+  async function updateRespGenerationCount(docId) {
+    await updateDoc(doc(db, "documents", docId), {
+      responseGenerations: increment(1),
+    });
+    setResponsesCreated((responsesCreated) => responsesCreated + 1);
+  }
+
+  function saveDocument(documentId) {
+    setSaveDocumentId(documentId);
+    setShowSaveModal(!showSaveModal);
+  }
+
+  async function postEditedResponses() {
+    let obj = {};
+
+    obj["type"] = "INTERROGATORY";
+    obj["id"] = docId;
+    obj["requests"] = responses;
+    const data = JSON.stringify(obj);
+    try {
+      const response = await fetch(`${baseUrl}/storeeditedcompletions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        json: true,
+        body: data,
+      });
+      const res = response;
+      return res;
+    } catch (error) {
+      console.error("Error sending responses to the server:", error);
+    }
+  }
+
+  const handleBlur = (e, i) => {
+    const newSelectedResponses = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          showInputEle: !showInputEle,
+        };
+      }
+      return r;
+    });
+    setResponses(newSelectedResponses);
+  };
+
+  const handleFocus = (arg, i) => {
+    const newSelectedResponses = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          showInputEle: !showInputEle,
+        };
+      }
+      return r;
+    });
+    setResponses(newSelectedResponses);
+  };
+
+  const handleEditValue = (e, i) => {
+    const editingRes = responses?.map((r) => {
+      if (r.index === i) {
+        return {
+          ...r,
+          resp: e.target.value,
+        };
+      }
+      return r;
+    });
+    setResponses(editingRes);
+  };
+
+  const handleBack = () => {
+    navigate(`/documents`);
+  };
+
+  const handleCancelSave = () => {
+    setShowSaveModal(false);
+  };
+
+  const handleSave = () => {
+    postEditedResponses();
+    setShowSaveModal(false);
+  };
+
+  const handleConfirmSave = () => {
+    setShowSaveModal(true);
+  };
+
+  const onScrollClick = () => {
+    const bottom = window.document.scrollingElement.scrollHeight;
+    const place = window.scrollY;
+    if (place > bottom / 2) {
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    } else if (place < bottom / 2) {
+      window.scrollTo({ top: bottom, behavior: "smooth" });
+    }
+  };
+
+  const numberingContent = (i) => {
+    let numText;
+    if (documentType === "interrogatories") {
+      numText = "INTERROGATORY NO..";
+    } else if (documentType === "admissions") {
+      numText = "REQUEST FOR ADMISSION NO.";
+    } else if (documentType === "production") {
+      numText = "REQUEST FOR PRODUCTION NO.";
+    } else {
+      numText = "REQUEST NO.";
+    }
+    return <div className="numbering-container">{`${numText}${i + 1}  `}</div>;
+  };
+
+  const respondent =
+    fetchedCase?.clientPosition == "Defendant"
+      ? fetchedCase?.defendantParties
+      : fetchedCase?.plaintiffParties;
+
+  const fooBar =
+    fetchedCase?.clientPosition == "Defendant"
+      ? fetchedCase?.plaintiffParties
+      : fetchedCase?.defendantParties;
+
+  const editingContent = () => {
+    return (
+      <>
+        {headerPicker()}
+        <div className="doc-editing-wrapper">
+          <div className="pleading-header">{headerString}</div>
+          <div>
+            {displayCopy.prelimaryStatement(
+              documentType,
+              respondent,
+              servingParty
+            )}
+          </div>
+          <div className="doc-editing-sub-wrapper">
+            {parsedRogs?.map((rog, i) => (
+              <div className="req-item-outer-div">
+                <div className="request-text-up">
+                  {numberingContent(i)}
+                  {scrubAll(rog?.text)}
+                </div>
+                <div className="req-item-inner-div">
+                  <EditElement
+                    value={
+                      responses && responses.length > 2
+                        ? // NEVER CHANGE THIS
+                          responses[i].resp
+                        : null
+                    }
+                    setShowInputEle={setShowInputEle}
+                    showInputEle={
+                      responses && responses.length > 2
+                        ? responses[i].showInputEle
+                        : null
+                    }
+                    handleFocus={handleFocus}
+                    handleEditValue={handleEditValue}
+                    handleBlur={handleBlur}
+                    i={i}
+                  />
+                </div>
+              </div>
+            ))}
+            <div className="doc-editing-button-container">
+              <div className="generate-button-box">
+                {/*  TODO: add tooltip: "This will save the document and create a .docx file that will (be downloaded?  saved somewhere?" */}
+                <Button
+                  className="primary-button create-gen-button"
+                  onClick={createAndReturnDocx}
+                  labelText={"Create .docx File"}
+                />
+              </div>
+              <div className="details-button-box">
+                <div>
+                  <Button
+                    className="pt-2 pb-2 mr-4 secondary-button edit-back-button"
+                    onClick={handleBack}
+                    labelText="Back To Documents Page"
+                  />
+                </div>
+                <div>
+                  <Button
+                    className="pt-2 pb-2 mr-2 primary-button"
+                    onClick={handleConfirmSave}
+                    labelText="Save Changes"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {showSaveModal && documentId !== null ? (
+          <ConfirmModal
+            onCancel={handleCancelSave}
+            onConfirm={handleSave}
+            buttonLabelText="Confirm Save"
+            modalText={
+              "Are you sure?  This will overrwrite any previously-saved edits."
+            }
+          />
+        ) : null}
+      </>
+    );
+  };
+
+  const readyToEdit = fetchedCase && responses.length > 1;
+
+  return isLoading ? (
+    <LoadingSpinner message={messages[0]} />
+  ) : readyToEdit ? (
+    editingContent()
+  ) : (
+    <div className="docedit-errstate-container">
+      <div className="nodocs-text-container">
+        <p>
+          {" "}
+          Response content for this document cannot be displayed at this time.
+        </p>
+        <p>Support has been notified and will respond within 24 hours.</p>
+        <Link to="/dashboard">Return to Dashboard</Link>
+      </div>
+    </div>
+  );
+};
+
+export default DocEditPage;

src/Components/Document/DocumentListPage.js

@@ -0,0 +1,266 @@
+import { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { AppContext } from "../../Hooks/useContext/appContext";
+import SelectDropdown from "../../pageElements/SelectDropdown";
+import { DocCard } from "../../pageElements/Cards";
+import { db } from "../../firebase";
+import {
+  collection,
+  deleteDoc,
+  doc,
+  documentId,
+  onSnapshot,
+  query,
+  where,
+} from "firebase/firestore";
+import ListPagination from "../../pageElements/ListPagination";
+import ConfirmModal from "../Modals/ConfirmModal";
+import "../../styles/doclist-page.scss";
+
+const DocumentListPage = ({ perPage }) => {
+  const navigate = useNavigate();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectedDocumentId, setSelectedDocumentId] = useState(null);
+  const [allDocs, setAllDocs] = useState(null);
+  const { appState } = useContext(AppContext);
+  const [totalPages, setTotalPages] = useState(1);
+  const { group } = appState;
+  const [page, setPage] = useState(1);
+  const [order, setOrder] = useState("parentCaseName");
+  const appUserId = group ? group.appUserId : null;
+  const baseUrl = "http://localhost:4000";
+  const [isBusy, setIsBusy] = useState(false);
+  const [selectedDocumentType, setSelectedDocumentType] = useState();
+  const [showModal, setShowModal] = useState(false);
+
+  function getDocuments() {
+    if (!appUserId) {
+      setAllDocs([]);
+      return;
+    }
+    const q = query(
+      collection(db, "documents"),
+      where("ownerId", "==", appUserId)
+    );
+    const unsub = onSnapshot(q, (snapshot) => {
+      const data = snapshot.docs.map((doc) => ({
+        ...doc.data(),
+        documentId: doc.id,
+      }));
+      if (order === "parentCaseName") {
+        data.sort((a, b) => {
+          return a.parentCaseName.toLowerCase() > b.parentCaseName.toLowerCase()
+            ? 1
+            : -1;
+        });
+      } else if (order === "parentCaseName2") {
+        data.sort((a, b) => {
+          return a.parentCaseName.toLowerCase() < b.parentCaseName.toLowerCase()
+            ? 1
+            : -1;
+        });
+      }
+      const pages = Math.ceil(data.length / perPage);
+      if (page > pages) {
+        setPage(pages);
+      }
+      setTotalPages(pages);
+      setAllDocs(data);
+    });
+    return unsub;
+  }
+
+  useEffect(getDocuments, [appUserId, order]);
+
+  async function deleteFromDb(documentId) {
+    if (isBusy) {
+      return;
+    }
+
+    setIsBusy(true);
+    try {
+      const docRef = doc(db, "documents", `${documentId}`);
+      await deleteDoc(docRef);
+      setShowDeleteModal(false);
+    } catch (err) {
+      console.log("Error deleting document from db:", err);
+    }
+    setIsBusy(false);
+  }
+
+  async function deleteFromStorage() {
+    const selectedDoc = allDocs.filter((doc) => {
+      console.log("doc", doc);
+      return doc.documentId == selectedDocumentId;
+    });
+    console.log(
+      "selectedDoc[0].responseGenerations",
+      selectedDoc[0].responseGenerations
+    );
+    const respGens = selectedDoc[0].responseGenerations;
+
+    try {
+      const response = await fetch(
+        `${baseUrl}/deleteDoc/${selectedDocumentId}/${selectedDocumentType}/${respGens}`,
+        {
+          method: "POST",
+        }
+      );
+      const res = response;
+      return res;
+    } catch (error) {
+      console.error("Error deleting document from storage:", error);
+    }
+  }
+
+  const dropDownOptions = [
+    { label: "Associated case name a - z", value: "parentCaseName" },
+    { label: "Associated case name z - a", value: "parentCaseName2" },
+  ];
+
+  async function openDoc(docId) {
+    /*
+    may deprecate this functionality
+    try {
+      window.open(`${baseUrl}/Backend/Documents/Uploads/${docId}`, "_blank");
+    } catch (err) {
+      console.log("Error occurred fetching document:", err);
+    }
+    */
+  }
+
+  function handleNavigate(
+    documentId,
+    responseGenerations,
+    caseId,
+    documentType
+  ) {
+    const _id = String(documentId);
+    const _resGen = String(responseGenerations);
+    const parentCaseId = String(caseId);
+    const _docType = String(documentType);
+    navigate(
+      `/docedit/${_id}/${responseGenerations}/${parentCaseId}/${documentType}`
+    );
+  }
+
+  function handleCancelDelete() {
+    if (!isBusy) {
+      setShowDeleteModal(false);
+    }
+  }
+
+  function handleDeleteDocument() {
+    deleteFromDb(selectedDocumentId);
+    deleteFromStorage(selectedDocumentId, selectedDocumentType);
+  }
+
+  function confirmDelete(documentId, docType) {
+    setSelectedDocumentId(documentId);
+    setSelectedDocumentType(docType);
+    setShowDeleteModal(true);
+  }
+
+  if (!group) {
+    return null;
+  }
+  console.log("allDocs", allDocs);
+  return (
+    <>
+      <div className="doc-list-header">
+        <h2 className="doc-header-text">Documents</h2>
+        <div className="user-name-container">{group.firm}</div>
+      </div>
+      {allDocs === null ? <div>Loading...</div> : null}
+      {allDocs !== null ? (
+        <div className="dropdown-container">
+          {allDocs.length > 0 ? (
+            <div className="d-flex justify-content-end mb-3">
+              <SelectDropdown
+                dropDownOptions={dropDownOptions}
+                titleText="Sort documents"
+                handleSelect={setOrder}
+              />
+            </div>
+          ) : (
+            <></>
+          )}
+          <div className="document-list-lower-wrapper">
+            {allDocs.length > 0 ? (
+              allDocs
+                .slice((page - 1) * perPage, page * perPage)
+                .map((doc, i) => (
+                  <DocCard
+                    key={`doccard-${i}`}
+                    title={doc.docTitle}
+                    parentCaseNumber={doc.parentCaseNumber}
+                    parentCaseName={doc.parentCaseName}
+                    parentCaseId={doc.parentCaseId}
+                    docType={doc.docType}
+                    documentId={doc.documentId}
+                    dateServed={doc.dateServed}
+                    openDocument={openDoc}
+                    confirmDelete={confirmDelete}
+                    handleNavigate={handleNavigate}
+                    displayDeleteButton={true}
+                    responseGenerations={doc.responseGenerations}
+                  />
+                ))
+            ) : (
+              <div className="nodocs-text-container">
+                <p className="nodocs-text">
+                  {" "}
+                  You have not uploaded any documents yet.
+                </p>
+                <p className="nodocs-light-text">To upload a document:</p>
+                <ol>
+                  <li className="nodocs-list-item">
+                    Navigate to the cases view (above link in navigation bar).{" "}
+                  </li>
+                  <li>
+                    {" "}
+                    Click "View Case" to select the case with which your
+                    document will be associated. This will open the Case Detail
+                    view.{" "}
+                  </li>
+                  <li className="nodocs-list-item">
+                    Note: If you have not yet created any cases, you will need
+                    to create one first - click "Create Case" and follow the
+                    prompts.
+                  </li>
+                  <li className="nodocs-list-item">
+                    In the case detail view, click "Upload Case Document" and
+                    select a document from your computer for upload.
+                  </li>
+                  <li className="nodocs-list-item">
+                    Your document will be parsed into a processable form. You
+                    will then be able to generate a response to the document.
+                  </li>
+                </ol>
+              </div>
+            )}
+          </div>
+          {totalPages > 1 ? (
+            <div className="mb-3">
+              <ListPagination
+                page={page}
+                totalPages={totalPages}
+                setPage={setPage}
+              />
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+      {showDeleteModal && selectedDocumentId !== null ? (
+        <ConfirmModal
+          onCancel={handleCancelDelete}
+          onConfirm={handleDeleteDocument}
+          buttonLabelText="Delete"
+          modalText="Confirm that you want to permanently delete this document."
+        />
+      ) : null}
+    </>
+  );
+};
+
+export default DocumentListPage;

src/Components/Document/captionHeaders/newJerseyCaption.js

@@ -0,0 +1,69 @@
+import Scrollbutton from "react-bootstrap/Button";
+import { ArrowUp, ArrowDown } from "react-bootstrap-icons";
+import "../../../styles/njcaption.scss";
+
+const NewJerseyCaption = (props) => {
+  const { fetchedCase, displayCopy, onScrollClick } = props;
+  return (
+    <div className="njcap-thirds">
+      <div className="njcap-left">
+        <div className="docedit-header-text">Edit Document</div>
+      </div>
+      <div className="njcap-middle">
+        <div className="njcap-middle-left">
+          <div className="njcap-divider"></div>
+          <div className="njcap-parties">{fetchedCase.plaintiffParties}</div>
+          <div className="njcap-plaintiff">
+            <div className="njcap-plaintiff-left"></div>
+            <div className="njcap-plaintiff-right">Plaintiff(s)</div>
+          </div>
+          <div className="njcap-plaintiff">
+            <div className="njcap-plaintiff-left"></div>
+            <div className="njcap-plaintiff-right"></div>
+            <div className="njcap-plaintiff-right">
+              <div className="njcap-vee">v.</div>
+            </div>
+          </div>
+          <div className="njcap-parties">{fetchedCase.defendantParties}</div>
+          <div className="njcap-plaintiff">
+            <div className="njcap-plaintiff-left"></div>
+            <div className="njcap-plaintiff-right">Defendant(s)</div>
+          </div>
+          <div className="njcap-divider2"></div>
+        </div>
+        <div className="njcap-middle-right">
+          <div className="njcap-middle-right-left">
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+            <span>)</span>
+          </div>
+          <div className="njcap-middle-right-right">
+            <div className="njcap-case-info-top">
+              {fetchedCase.jurisdiction}
+            </div>
+            <div className="njcap-case-info">{fetchedCase.venue}</div>
+            <div className="njcap-case-info"></div>
+            <div className="njcap-case-info">
+              Docket No. {fetchedCase.caseNumber}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="njcap-right">
+        <Scrollbutton onClick={onScrollClick} className="scroll-button">
+          Scroll <ArrowUp /> <ArrowDown />
+        </Scrollbutton>
+      </div>
+    </div>
+  );
+};
+
+export default NewJerseyCaption;

src/Components/Document/captionHeaders/newYorkCaption.js

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import Scrollbutton from "react-bootstrap/Button";
+import { ArrowUp, ArrowDown } from "react-bootstrap-icons";
+
+const NewYorkCaption = (props) => {
+  const { fetchedCase, displayCopy, onScrollClick } = props;
+
+  return (
+    <>
+      <div className="docedit-super-row">
+        <div className="docedit-uppercol1"></div>
+        <div className="docedit-uppercol2">
+          <span>{fetchedCase?.jurisdiction}</span>
+          <span>{fetchedCase?.venue}</span>
+          <div className="docedit-uppercol-divider"></div>
+        </div>
+        <div className="docedit-uppercol3"></div>
+      </div>
+      <div className="docedit-header-row">
+        <div className="docedit-header-col1">
+          <div className="docedit-header-text">Edit Document</div>
+        </div>
+        <div className="docedit-header-col2">
+          <div className="header-middle-row1">
+            {fetchedCase?.caption ? fetchedCase?.caption : <></>},
+          </div>
+          <div className="header-middle-row2">
+            <div className="content-spacer"></div>
+            <div className="middle-row-inner">
+              <div>Plaintiff(s),</div>
+              <div className="casenum-box">
+                Index no. {fetchedCase?.caseNumber}
+              </div>
+            </div>
+          </div>
+          <div className="header-middle-row3">
+            <div>{displayCopy.versusText}</div>
+            <div>Judge: {fetchedCase?.judge}</div>
+          </div>
+          <div className="header-middle-row4">
+            {fetchedCase?.captionTwo ? fetchedCase?.captionTwo : <></>},
+          </div>
+          <div className="header-middle-row5">
+            <div className="content-spacer2"></div>
+            <div>Defendant(s)</div>
+          </div>
+          <div className="docedit-uppercol-divider"></div>
+        </div>
+        <div className="docedit-header-col3">
+          <div className="scroll-button-box">
+            <Scrollbutton onClick={onScrollClick} className="scroll-button">
+              Scroll <ArrowUp /> <ArrowDown />
+            </Scrollbutton>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default NewYorkCaption;