Ui changed for document version list

src/components/Documents/DocumentVersionList.jsx

@@ -0,0 +1,170 @@
+import React from "react";
+import VersionListSkeleton from "./VersionListSkeleton";
+import { getDocuementsStatus } from "./Documents";
+import Avatar from "../common/Avatar";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { DOWNLOAD_DOCUMENT, VERIFY_DOCUMENT } from "../../utils/constants";
+import { FileIcon } from "../../utils/FileIcon";
+
+const DocumentVersionList = ({
+  versionLoding,
+  versionList,
+  isPending,
+  setOpenDocument,
+  VerifyDocument,
+}) => {
+  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)
+    : [];
+
+  if (versionLoding) {
+    return <VersionListSkeleton items={2} />;
+  }
+
+  if (!sortedVersions.length) {
+    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="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
+                  }`}
+                >
+                  <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">
+                        fileSize: {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 align-items-center">
+                          {formatUTCToLocalTime(document?.uploadedAt)} |
+                          Uploaded by{" "}
+                          <div className="d-flex align-items-center ms-1">
+                            <Avatar
+                              size="xs"
+                              classAvatar="m-0"
+                              firstName={document.uploadedBy?.firstName}
+                              lastName={document.uploadedBy?.lastName}
+                            />
+                            <span className="text-truncate ms-1">
+                              {`${document.uploadedBy?.firstName ?? ""} ${
+                                document.uploadedBy?.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>
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="d-flex align-items-end">
+                        {getDocuementsStatus(document.isVerified)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DocumentVersionList;

src/components/Documents/Documents.jsx

@@ -113,18 +113,34 @@ const Documents = ({ Document_Entity, Entity }) => {
         <div className="card d-flex p-2">
           <div className="row align-items-center">
             {/* Search */}
-            <div className="col-6 col-md-6 col-lg-3 mb-md-0">
+            <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
-              <input
+              <div className="d-flex"> <input
                 type="search"
                 value={searchText}
                 onChange={(e) => setSearchText(e.target.value)}
                 className="form-control form-control-sm"
                 placeholder="Search Document"
-              />
+              /></div>
+              <label className="switch switch-sm mx-2">
+                <input
+                  type="checkbox"
+                  className="switch-input"
+                  checked={isActive}
+                  onChange={(e) => setIsActive(e.target.checked)}
+                />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">
+                  {isActive ? "Active" : "In-Active"}
+                </span>
+              </label>
             </div>
+            
 
             {/* Actions */}
-            <div className="col-6 col-md-6 col-lg-9 text-end">
+            <div className="col-6 col-md-6 col-lg-8 text-end">
               {/* <span
               className="text-tiny text-muted p-1 border-0 bg-none lead mx-3 cursor-pointer"
               disabled={isRefetching}
@@ -141,21 +157,7 @@ const Documents = ({ Document_Entity, Entity }) => {
                 }`}
               ></i>
             </span> */}
-              <label className="switch switch-sm">
+              
-                <input
-                  type="checkbox"
-                  className="switch-input"
-                  checked={isActive}
-                  onChange={(e) => setIsActive(e.target.checked)}
-                />
-                <span className="switch-toggle-slider">
-                  <span className="switch-on"></span>
-                  <span className="switch-off"></span>
-                </span>
-                <span className="switch-label">
-                  {isActive ? "Active" : "In-Active"}
-                </span>
-              </label>
 
              {canUploadDocument && (<button
                 type="button"

src/components/Documents/DocumentsList.jsx

@@ -243,13 +243,6 @@ const DocumentsList = ({
             })}
           </tbody>
         </table>
-        {data?.data?.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={data.totalPages}
-            onPageChange={paginate}
-          />
-        )}
       </div>
     </>
   );

src/components/Documents/ViewDocument.jsx

@@ -16,6 +16,7 @@ import Pagination from "../common/Pagination";
 import VersionListSkeleton from "./VersionListSkeleton";
 import DocumentDetailsSkeleton from "./DocumentDetailsSkeleton ";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import DocumentVersionList from "./DocumentVersionList";
 
 const ViewDocument = () => {
   const { viewDoc, setViewDoc, setOpenDocument } = useDocumentContext();
@@ -32,7 +33,7 @@ const ViewDocument = () => {
     error: versionError,
   } = useDocumentVersionList(
     data?.parentAttachmentId,
-    ITEMS_PER_PAGE-10,
+    ITEMS_PER_PAGE - 10,
     currentPage
   );
   const paginate = (page) => {
@@ -45,6 +46,9 @@ const ViewDocument = () => {
   const VerifyDocument = () => {
     VerifyDoc({ documentId: viewDoc?.document, isVerify: true });
   };
+  const RejectDocument = () => {
+    VerifyDoc({ documentId: viewDoc?.document, isVerify: false });
+  };
 
   if (isLoading) return <DocumentDetailsSkeleton />;
   if (isError)
@@ -106,12 +110,22 @@ const ViewDocument = () => {
             <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
               Uploaded By:
             </span>
-            <span className="text-muted">
+            <div className="d-flex align-items-center ms-1">
-              {data.uploadedBy?.firstName || "-"}
+              <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>
-        <div className="col-12 col-md-6">
+        {data.updatedAt && (
           <div className="d-flex">
             <span className="fw-semibold me-2" style={{ minWidth: "130px" }}>
               Updated At:
@@ -120,7 +134,8 @@ const ViewDocument = () => {
               {formatUTCToLocalTime(data.updatedAt) || "-"}
             </span>
           </div>
-        </div>
+        )}{" "}
+        <div className="col-12 col-md-6"></div>
       </div>
 
       {/* Row 4 */}
@@ -170,7 +185,6 @@ const ViewDocument = () => {
         </div>
       </div>
 
-      {/* Row 6 - Description full width */}
       <div className="row mb-2 text-start">
         <div className="col-12">
           <div className="d-flex">
@@ -181,85 +195,38 @@ const ViewDocument = () => {
           </div>
         </div>
       </div>
-
+      {data.isVerified === null && (
-      <div className="row text-start py-2">
+        <div className="d-flex justify-content-end">
-        <p className="m-0  fw-semibold : ">Documents</p>
+          <div className="d-flex text-start text-sm-end">
-        {versionLoding && <VersionListSkeleton items={2} />}
+            {" "}
-        {!versionLoding && (
+            {isPending ? (
-          <div className="list-group mx-0">
+              "Please Wait..."
-            {versionList?.data.map((document) => (
+            ) : (
-              <a
+              <div className="mx-2">
-                className="list-group-item list-group-item-action  py-1  border border-bottom border-top-0 border-start-0 border-end-0"
+                <a
-                key={document.id}
+                  onClick={VerifyDocument}
-              >
+                  className="cursor-pointer text-primary"
-                <div className="d-flex w-100 justify-content-between m-0">
+                >
-                  <p className="m-0">
+                  Verify
-                    {document.name}{" "}
+                </a>
-                    <em className="text-secondary ms-3">
+                <a
-                      {formatUTCToLocalTime(document?.uploadedAt)}
+                  onClick={RejectDocument}
-                    </em>
+                  className="cursor-pointer text-danger mx-2"
-                  </p>
+                >
-                  <div className="d-flex align-items-center gap-1">
+                  Reject
-                    <small>Version {document.version}</small>
+                </a>
-                    <small>{getDocuementsStatus(document.isVerified)}</small>
+              </div>
-                  </div>
+            )}
-                </div>
-                <div className="d-flex align-items-center justify-content-between text-secondary">
-                  <div className="d-flex align-items-center">
-                    Upload By
-                    <Avatar
-                      size="xs"
-                      classAvatar="m-0"
-                      firstName={document.uploadedBy?.firstName}
-                      lastName={document.uploadedBy?.lastName}
-                    />
-                    <span className="text-truncate m-0 ">
-                      {`${document.uploadedBy?.firstName ?? ""} ${
-                        document.uploadedBy?.lastName ?? ""
-                      }`.trim() || "N/A"}
-                    </span>
-                  </div>
-                  <div className="d-flex text-primary align-items-center gap-2 ">
-                    {document.isVerified == null &&
-                      canVerifyDocument &&
-                      (isPending ? (
-                        <div
-                          class="spinner-border spinner-border-sm text-primary"
-                          role="status"
-                        >
-                          <span class="visually-hidden">Loading...</span>
-                        </div>
-                      ) : (
-                        <span
-                          className="cursor-pointer"
-                          onClick={VerifyDocument}
-                        >
-                          verify
-                        </span>
-                      ))}
-                    {canDownloadDocument && (
-                      <span
-                        className="cursor-pointer text-decoration-underline"
-                        onClick={() => setOpenDocument(true)}
-                      >
-                        <small>view</small>{" "}
-                        <i className="bx bx-sm bx-link-external"></i>
-                      </span>
-                    )}
-                  </div>
-                </div>
-              </a>
-            ))}
           </div>
-        )}
+        </div>
-        {!versionLoding && versionList?.data?.length > 0 && (
+      )}
-          <Pagination
+      <DocumentVersionList
-            currentPage={currentPage}
+        versionLoding={versionLoding}
-            totalPages={versionList?.totalPages}
+        versionList={versionList}
-            onPageChange={paginate}
+        isPending={isPending}
-          />
+        setOpenDocument={setOpenDocument}
-        )}
+        VerifyDocument={VerifyDocument}
-      </div>
+      />
     </div>
   );
 };

src/hooks/useDocument.js

@@ -162,6 +162,7 @@ export const useVerifyDocument = ()=>{
     onSuccess: (data, variables) => {
      queryClient.invalidateQueries({ queryKey: ["DocumentVersionList"] });
      queryClient.invalidateQueries({ queryKey: ["DocumentList"] });
+     queryClient.invalidateQueries({ queryKey: ["Document"] });
       showToast(
         data.response.data.message ||
           "Document Successfully Verified !",

src/utils/FileIcon.jsx

@@ -0,0 +1,26 @@
+const contentTypeIcons = {
+  "application/pdf": "fa-solid fa-file-pdf text-danger",
+  "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-success",
+  "application/vnd.ms-powerpoint": "fa-solid fa-file-powerpoint text-warning",
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+    "fa-solid fa-file-powerpoint text-warning",
+  "image/jpg": "fa-solid fa-file-image text-info",
+  "image/jpeg": "fa-solid fa-file-image text-info",
+  "image/png": "fa-solid fa-file-image text-info",
+  "image/gif": "fa-solid fa-file-image text-info",
+  "text/plain": "fa-solid fa-file-lines text-secondary",
+  "text/csv": "fa-solid fa-file-csv text-success",
+  "application/json": "fa-solid fa-file-code text-dark",
+  folder: "fa-solid fa-folder text-warning", // special for folders
+  default: "fa-solid fa-file text-muted",
+};
+
+export const FileIcon = ({ type, size = "fs-4", className = "" }) => {
+  const iconClass = contentTypeIcons[type] || contentTypeIcons.default;
+  return <i className={`${iconClass} ${size} ${className}`}></i>;
+};