From 4295e7d8d6ef7f4e3dad3bbe27cf82e1f17ccc24 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 8 Sep 2025 16:04:13 +0530
Subject: [PATCH] UI Changes in Document Details popup.

---
 .../Documents/DocumentVersionList.jsx         | 228 ++++++++----------
 src/components/Documents/ViewDocument.jsx     |   4 +-
 2 files changed, 105 insertions(+), 127 deletions(-)

diff --git a/src/components/Documents/DocumentVersionList.jsx b/src/components/Documents/DocumentVersionList.jsx
index 87b4004e..aea49267 100644
--- a/src/components/Documents/DocumentVersionList.jsx
+++ b/src/components/Documents/DocumentVersionList.jsx
@@ -16,36 +16,12 @@ const DocumentVersionList = ({
 }) => {
   const canVerifyDocument = useHasUserPermission(VERIFY_DOCUMENT);
   const canDownloadDocument = useHasUserPermission(DOWNLOAD_DOCUMENT);
+
   const handleOpenDocument = () => {
     if (canDownloadDocument) {
       setOpenDocument(true);
     }
   };
-  const contentTypeIcons = {
-    "application/pdf": "fa-solid fa-file-pdf text-primary",
-    "application/msword": "fa-solid fa-file-word text-primary",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
-      "fa-solid fa-file-word text-primary",
-    "application/vnd.ms-excel": "fa-solid fa-file-excel text-success",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
-      "fa-solid fa-file-excel text-primary",
-    "application/vnd.ms-powerpoint": "fa-solid fa-file-powerpoint text-primary",
-    "application/vnd.openxmlformats-officedocument.presentationml.presentation":
-      "fa-solid fa-file-powerpoint text-primary",
-    "image/jpg": "fa-solid fa-file-image text-primary",
-    "image/jpeg": "fa-solid fa-file-image text-primary",
-    "image/png": "fa-solid fa-file-image text-primary",
-    "image/gif": "fa-solid fa-file-image text-primary",
-    "text/plain": "fa-solid fa-file-lines text-primary",
-    "text/csv": "fa-solid fa-file-csv text-primary",
-    "application/json": "fa-solid fa-file-code text-primary",
-    default: "fa-solid fa-file text-primary",
-  };
-
-  const getIcon = (fileName = "") => {
-    const ext = fileName.split(".").pop().toLowerCase();
-    return contentTypeIcons[ext] || contentTypeIcons.default;
-  };
 
   const sortedVersions = versionList?.data
     ? [...versionList.data].sort((a, b) => b.version - a.version)
@@ -59,123 +35,125 @@ const DocumentVersionList = ({
     return <p className="text-muted">No documents available.</p>;
   }
 
-  const latestDoc = sortedVersions[0];
-
   return (
-    <div className="accordion" id="docAccordion">
-      <div className="accordion-item shadow-none">
-        <h2 className="accordion-header" id="headingDoc">
-          <button
-            className="accordion-button"
-            type="button"
-            data-bs-toggle="collapse"
-            data-bs-target="#collapseDoc"
-            aria-expanded="true"
-            aria-controls="collapseDoc"
-          >
-            <i className="bx bxs-folder me-2 text-warning fs-5"></i>
-            {latestDoc.name} (Latest v{latestDoc.version})
-          </button>
-        </h2>
-        <div
-          id="collapseDoc"
-          className="accordion-collapse collapse show"
-          aria-labelledby="headingDoc"
-          data-bs-parent="#docAccordion"
-        >
+    <>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <h5 className="mb-0">Documents</h5>
+        <div className="form-check form-switch">
+          <input
+            className="form-check-input"
+            type="checkbox"
+            id="showVersionsSwitch"
+          />
+          <label className="form-check-label" htmlFor="showVersionsSwitch">
+            Show Versions
+          </label>
+        </div>
+      </div>
+      <div className="accordion" id="docAccordion">
+        <div className="accordion-item shadow-none">
           <div className="accordion-body p-2">
             <div className="list-group list-group-flush">
               {sortedVersions.map((document, index) => (
                 <div
                   key={document.id}
-                  className={`list-group-item list-group-item-action d-flex align-items-center cursor-pointer ${index > 0 ? "ms-4" : "" // indent only older versions
-                    }`}
+                  className="list-group-item list-group-item-action" style={{ marginLeft: "-30px" }}
                 >
-                  <FileIcon
-                    type={document.contentType}
-                    size="fs-2"
-                    className="me-2"
-                  />
-
-                  <div className="w-100">
-                    <div className="d-flex justify-content-between align-items-center">
-                      <small className=" fw-normal">{document.name}</small>
-                      <small className=" fw-normal">
-                        Version-{document.version}
-                      </small>{" "}
-                      <small className=" text-secondary fw-normal">
-                        File Size: {document.fileSize} Kb
-                      </small>
-                    </div>
-                    <div className="d-flex justify-content-between m-0">
-                      <div
-                        className="user-info text-start m-0"
-                        onClick={handleOpenDocument}
-                      >
+                  <div className="d-flex justify-content-between">
+                    {/* Left Side: Document Details */}
+                    <div className="d-flex align-items-start">
+                      <FileIcon
+                        type={document.contentType}
+                        size="fs-2"
+                        className="me-2"
+                      />
+                      <div>
+                        <div className="d-flex align-items-center mb-1">
+                          <span className="fw-normal">
+                            {document.name}
+                          </span>
+                        </div>
+                        <div className="d-flex align-items-center mb-1">
+                          {getDocuementsStatus(document.isVerified)}
+                          <span className="text-secondary ms-7">
+                            File Size: {document.fileSize} Kb
+                          </span>
+                        </div>
                         <div className="d-flex align-items-center">
-                          {formatUTCToLocalTime(document?.uploadedAt)} |
-                          Uploaded by{" "}
-                          <div className="d-flex align-items-center ms-1">
+                          <small className="text-secondary me-2">
+                            Uploaded by
+                          </small>
+                          <Avatar
+                            size="xs"
+                            classAvatar="m-0"
+                            firstName={document.uploadedBy?.firstName}
+                            lastName={document.uploadedBy?.lastName}
+                          />
+                          <span className="ms-1">
+                            <small className="fw-normal">
+                              {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""}`.trim() || "N/A"}
+                            </small>
+                          </span>
+                          <small className="ms-2">
+                            {formatUTCToLocalTime(document?.uploadedAt)}
+                          </small>
+                        </div>
+                        {document?.verifiedAt && (
+                          <div className="d-flex align-items-center mt-1">
+                            <small className="text-secondary me-2">
+                              {document.isVerified ? "Approved by" : "Rejected by"}
+                            </small>
                             <Avatar
                               size="xs"
                               classAvatar="m-0"
-                              firstName={document.uploadedBy?.firstName}
-                              lastName={document.uploadedBy?.lastName}
+                              firstName={document.verifiedBy?.firstName}
+                              lastName={document.verifiedBy?.lastName}
                             />
-                            <span className="text-truncate ms-1">
-                              {`${document.uploadedBy?.firstName ?? ""} ${document.uploadedBy?.lastName ?? ""
-                                }`.trim() || "N/A"}
+                            <span className="ms-1">
+                              <small className="fw-normal">
+                                {`${document.verifiedBy?.firstName ?? ""} ${document.verifiedBy?.lastName ?? ""}`.trim() || "N/A"}
+                              </small>
                             </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)} |
-                            Updated by{" "}
-                            <div className="d-flex align-items-center ms-1">
-                              <Avatar
-                                size="xs"
-                                classAvatar="m-0"
-                                firstName={document.updatedBy?.firstName}
-                                lastName={document.updatedBy?.lastName}
-                              />
-                              <span className="text-truncate ms-1">
-                                {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""
-                                  }`.trim() || "N/A"}
-                              </span>
-                            </div>
+                            <small className="ms-2">
+                              {formatUTCToLocalTime(document?.verifiedAt)}
+                            </small>
                           </div>
                         )}
                       </div>
+                    </div>
 
-                      <div className="d-flex align-items-end">
-                        {getDocuementsStatus(document.isVerified)}
+                    {/* Right Side: Status and Actions */}
+                    <div className="d-flex flex-column align-items-end" style={{ marginTop: "42px", marginRight: "-52px" }}>
+                      {document.isLatest && (
+                        <span className="badge bg-success-subtle text-success">
+                          latest
+                        </span>
+                      )}
+
+                      <div className="d-flex align-items-center mt-1">
+                        {document?.updatedBy && (
+                          <>
+                            <small className="text-secondary me-2">Updated by</small>
+                            <Avatar
+                              size="xs"
+                              classAvatar="m-0"
+                              firstName={document.updatedBy?.firstName}
+                              lastName={document.updatedBy?.lastName}
+                            />
+                            <span className="ms-1">
+                              <small className="fw-normal">
+                                {`${document.updatedBy?.firstName ?? ""} ${document.updatedBy?.lastName ?? ""}`.trim() || "N/A"}
+                              </small>
+                            </span>
+                            <small className="ms-2">
+                              {formatUTCToLocalTime(document?.updatedAt)}
+                            </small>
+                          </>
+                        )}
                       </div>
+                      <small className="text-secondary mt-1">
+                        version {document.version}
+                      </small>
                     </div>
                   </div>
                 </div>
@@ -184,7 +162,7 @@ const DocumentVersionList = ({
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/Documents/ViewDocument.jsx b/src/components/Documents/ViewDocument.jsx
index b4e401ce..5eb46f37 100644
--- a/src/components/Documents/ViewDocument.jsx
+++ b/src/components/Documents/ViewDocument.jsx
@@ -57,7 +57,7 @@ const ViewDocument = () => {
         <p className="danger-text">{error?.response?.status}</p>
       </div>
     );
-
+  console.log("kartik", data)
   return (
     <div className="p-3">
       <p className="fw-bold fs-5 mb-3 border-bottom pb-2">Document Details</p>
@@ -150,7 +150,7 @@ const ViewDocument = () => {
           {isPending ? (
             <span className="text-muted">Please Wait...</span>
           ) : (
-            <>              
+            <>
               <button
                 type="button"
                 onClick={RejectDocument}