Changes In Popup of Document Manager popup.

src/components/Documents/DocumentVersionList.jsx

@@ -88,9 +88,8 @@ const DocumentVersionList = ({
               {sortedVersions.map((document, index) => (
                 <div
                   key={document.id}
-                  className={`list-group-item list-group-item-action d-flex align-items-center cursor-pointer ${
+                  className={`list-group-item list-group-item-action d-flex align-items-center cursor-pointer ${index > 0 ? "ms-4" : "" // indent only older versions
-                    index > 0 ? "ms-4" : "" // indent only older versions
+                    }`}
-                  }`}
                 >
                   <FileIcon
                     type={document.contentType}
@@ -105,7 +104,7 @@ const DocumentVersionList = ({
                         Version-{document.version}
                       </small>{" "}
                       <small className=" text-secondary fw-normal">
-                        fileSize: {document.fileSize} Kb
+                        File Size: {document.fileSize} Kb
                       </small>
                     </div>
                     <div className="d-flex justify-content-between m-0">
@@ -124,13 +123,36 @@ const DocumentVersionList = ({
                               lastName={document.uploadedBy?.lastName}
                             />
                             <span className="text-truncate ms-1">
-                              {`${document.uploadedBy?.firstName ?? ""} ${
+                              {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""
-                                document.uploadedBy?.lastName ?? ""
+                                }`.trim() || "N/A"}
-                              }`.trim() || "N/A"}
                             </span>
                           </div>
                         </div>
 
+                        <div className="d-flex align-items-center">
+                          {document?.verifiedAt && (
+                            <>
+                              {formatUTCToLocalTime(document?.verifiedAt)} |{" "}
+                              {document.isVerified
+                                ? "Verified by "
+                                : "Rejected by "}
+                              <div className="d-flex align-items-center ms-1">
+                                <Avatar
+                                  size="xs"
+                                  classAvatar="m-0"
+                                  firstName={document.verifiedBy?.firstName}
+                                  lastName={document.verifiedBy?.lastName}
+                                />
+                                <span className="text-truncate ms-1">
+                                  {`${document.verifiedBy?.firstName ?? ""} ${document.verifiedBy?.lastName ?? ""
+                                    }`.trim() || "N/A"}
+                                </span>
+                              </div>
+                            </>
+                          )}
+                        </div>
+
+
                         {document?.updatedAt && (
                           <div className="d-flex align-items-center">
                             {formatUTCToLocalTime(document?.updatedAt)} |
@@ -143,9 +165,8 @@ const DocumentVersionList = ({
                                 lastName={document.updatedBy?.lastName}
                               />
                               <span className="text-truncate ms-1">
-                                {`${document.updatedBy?.firstName ?? ""} ${
+                                {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""
-                                  document.updatedBy?.lastName ?? ""
+                                  }`.trim() || "N/A"}
-                                }`.trim() || "N/A"}
                               </span>
                             </div>
                           </div>
@@ -167,4 +188,4 @@ const DocumentVersionList = ({
   );
 };
 
-export default DocumentVersionList;
+export default DocumentVersionList;

src/components/Documents/ManageDocument.jsx

@@ -402,7 +402,15 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
           </div>
 
           {/* Buttons */}
-          <div className="d-flex justify-content-center gap-3">
+          <div className="d-flex justify-content-end gap-3 mt-4">            
+            <button
+              type="reset"
+              className="btn btn-label-secondary btn-sm"
+              disabled={isPending}
+              onClick={closeModal}
+            >
+              Cancel
+            </button>
             <button
               type="submit"
               className="btn btn-primary btn-sm"
@@ -410,14 +418,6 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
             >
               {isPending ? "Please Wait..." : " Submit"}
             </button>
-            <button
-              type="reset"
-              className="btn btn-secondary btn-sm"
-              disabled={isPending}
-              onClick={closeModal}
-            >
-              Cancel
-            </button>
           </div>
         </form>
       </FormProvider>

src/components/Documents/ViewDocument.jsx

@@ -14,28 +14,27 @@ import {
 } from "../../utils/constants";
 import Pagination from "../common/Pagination";
 import VersionListSkeleton from "./VersionListSkeleton";
+// import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton";
 import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton ";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import DocumentVersionList from "./DocumentVersionList";
 
 const ViewDocument = () => {
-  const { viewDoc, setViewDoc, setOpenDocument } = useDocumentContext();
+  const { viewDoc, setOpenDocument } = useDocumentContext();
   const [currentPage, setCurrentPage] = useState(1);
   const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
-  const canDownloadDocument = useHasUserPermission(DOWNLOAD_DOCUMENT);
   const { data, isLoading, isError, error } = useDocumentDetails(
     viewDoc?.document
   );
   const {
     data: versionList,
-    isError: isVersionError,
     isLoading: versionLoding,
-    error: versionError,
   } = useDocumentVersionList(
     data?.parentAttachmentId,
     ITEMS_PER_PAGE - 10,
     currentPage
   );
+
   const paginate = (page) => {
     if (page >= 1 && page <= (versionList?.totalPages ?? 1)) {
       setCurrentPage(page);
@@ -58,168 +57,120 @@ const ViewDocument = () => {
         <p className="danger-text">{error?.response?.status}</p>
       </div>
     );
+
   return (
-    <div className="p-1">
+    <div className="p-3">
-      <p className="fw-bold fs-6">Document Details</p>
+      <p className="fw-bold fs-5 mb-3 border-bottom pb-2">Document Details</p>
 
-      <div className="row mb-2">
-        <div className="col-12 col-md-6">
-          <div className="d-flex text-start">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Document Name:
-            </span>
-            <span className="text-muted">{data.name || "-"}</span>
-          </div>
-        </div>
-        <div className="col-12 col-md-6">
-          <div className="d-flex text-start">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Document ID:
-            </span>
-            <span className="text-muted">{data.documentId || "-"}</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Row 2 */}
-      <div className="row mb-2">
-        <div className="col-12 col-md-6 text-start">
-          <div className="d-flex">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Version:
-            </span>
-            <span className="text-muted">{data.version || "-"}</span>
-          </div>
-        </div>
-        <div className="col-12 col-md-6 text-start">
-          <div className="d-flex">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Uploaded At:
-            </span>
-            <span className="text-muted">
-              {formatUTCToLocalTime(data.uploadedAt)}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      {/* Row 3 */}
       <div className="row mb-2 text-start">
-        <div className="col-12 col-md-6">
+        <div className="col-12 col-md-6 d-flex">
-          <div className="d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
+            Category:
-              Uploaded By:
+          </span>
-            </span>
+          <span className="text-muted">
-            <div className="d-flex align-items-center ms-1">
+            {data.documentType?.documentCategory?.name || "-"}
-              <Avatar
+          </span>
-                size="xs"
-                classAvatar="m-0"
-                firstName={data.uploadedBy?.firstName}
-                lastName={data.uploadedBy?.lastName}
-              />
-              <span className="text-truncate ms-1">
-                {`${data.uploadedBy?.firstName ?? ""} ${
-                  data.uploadedBy?.lastName ?? ""
-                }`.trim() || "N/A"}
-              </span>
-            </div>
-          </div>
         </div>
-        {data.updatedAt && (
+        <div className="col-12 col-md-6 d-flex">
-          <div className="d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
+            Type:
-              Updated At:
+          </span>
-            </span>
+          <span className="text-muted">{data.documentType?.name || "-"}</span>
-            <span className="text-muted">
-              {formatUTCToLocalTime(data.updatedAt) || "-"}
-            </span>
-          </div>
-        )}{" "}
-        <div className="col-12 col-md-6"></div>
-      </div>
-
-      {/* Row 4 */}
-      <div className="row mb-2 text-start">
-        <div className="col-12 col-md-6">
-          <div className="d-flex">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Category:
-            </span>
-            <span className="text-muted">
-              {data.documentType?.documentCategory?.name || "-"}
-            </span>
-          </div>
-        </div>
-        <div className="col-12 col-md-6">
-          <div className="d-flex">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Type:
-            </span>
-            <span className="text-muted">{data.documentType?.name || "-"}</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Row 5 - Tags full width */}
-      <div className="row mb-2 text-start">
-        <div className="col-12">
-          <div className="d-flex">
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
-              Tags:
-            </span>
-            <div className="d-flex flex-wrap gap-2">
-              {data.tags?.length > 0 ? (
-                data.tags.map((t, i) => (
-                  <span
-                    key={i}
-                    className="badge rounded-pill bg-label-secondary"
-                  >
-                    {t.name}
-                  </span>
-                ))
-              ) : (
-                <span className="text-muted">-</span>
-              )}
-            </div>
-          </div>
         </div>
       </div>
 
       <div className="row mb-2 text-start">
-        <div className="col-12">
+        <div className="col-12 col-md-6 d-flex">
-          <div className="d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
-            <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
+            Document Name:
-              Description:
+          </span>
-            </span>
+          <span className="text-muted">{data.name || "-"}</span>
-            <span className="text-muted">{data.description || "-"}</span>
+        </div>
-          </div>
+        <div className="col-12 col-md-6 d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
+            Document ID:
+          </span>
+          <span className="text-muted">{data.documentId || "-"}</span>
         </div>
       </div>
-      {data.isVerified === null && (
+
-        <div className="d-flex justify-content-end">
+      <div className="row mb-2 text-start">
-          <div className="d-flex text-start text-sm-end">
+        <div className="col-12 col-md-6 d-flex">
-            {" "}
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
-            {isPending ? (
+            Uploaded At:
-              "Please Wait..."
+          </span>
+          <span className="text-muted">
+            {formatUTCToLocalTime(data.uploadedAt)}
+          </span>
+        </div>
+        <div className="col-12 col-md-6 d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
+            Updated At:
+          </span>
+          <span className="text-muted">
+            {formatUTCToLocalTime(data.updatedAt) || "-"}
+          </span>
+        </div>
+      </div>
+
+      <div className="row mb-2 text-start">
+        <div className="col-12 d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
+            Tags:
+          </span>
+          <div className="d-flex flex-wrap gap-2">
+            {data.tags?.length > 0 ? (
+              data.tags.map((t, i) => (
+                <span
+                  key={i}
+                  className="badge rounded-pill bg-label-secondary"
+                >
+                  {t.name}
+                </span>
+              ))
             ) : (
-              <div className="mx-2">
+              <span className="text-muted">-</span>
-                <a
-                  onClick={VerifyDocument}
-                  className="cursor-pointer text-primary"
-                >
-                  Verify
-                </a>
-                <a
-                  onClick={RejectDocument}
-                  className="cursor-pointer text-danger mx-2"
-                >
-                  Reject
-                </a>
-              </div>
             )}
           </div>
         </div>
+      </div>
+
+      <div className="row mb-3 text-start">
+        <div className="col-12 d-flex">
+          <span className="fw-semibold me-2" style={{ minWidth: "140px" }}>
+            Description:
+          </span>
+          <span className="text-muted">{data.description || "-"}</span>
+        </div>
+      </div>
+
+      {/* Verify / Reject */}
+      {data.isVerified === null && canVerifyDocument && (
+        <div className="d-flex justify-content-end mb-3">
+          {isPending ? (
+            <span className="text-muted">Please Wait...</span>
+          ) : (
+            <>              
+              <button
+                type="button"
+                onClick={RejectDocument}
+                className="btn btn-sm btn-danger me-2"
+              >
+                Reject
+              </button>
+              <button
+                type="button"
+                onClick={VerifyDocument}
+                className="btn btn-sm btn-primary"
+              >
+                Verify
+              </button>
+            </>
+          )}
+        </div>
       )}
+
+
       <DocumentVersionList
         versionLoding={versionLoding}
         versionList={versionList}

src/components/common/TagInput.jsx

@@ -25,7 +25,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", options = [] })
   };
 
   const handleKeyDown = (e) => {
-    if (e.key === "Enter" && input.trim()) {
+    if ((e.key === "Enter" || e.key === " ") && input.trim()) {
       e.preventDefault();
       handleAdd(input.trim());
       setInput("");