From 6721b334cfb0135415e40a3f6e635be014e67e57 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 6 Jun 2024 14:38:08 +0530
Subject: [PATCH] refactor: remove unncessary code from dashboard & css changes
 in sidebar

---
 .../components/dashboard/DashboardReport.js   |   7 +-
 .../src/components/dashboard/GetDashboard.js  |  26 +--
 .../components/shared/fields/SignersInput.js  |   2 +-
 apps/OpenSign/src/components/sidebar/Menu.js  |   4 +-
 .../src/components/sidebar/Sidebar.js         |   5 +-
 .../src/components/sidebar/SubMenu.js         |   4 +-
 apps/OpenSign/src/pages/Dashboard.js          |  20 +--
 .../src/primitives/GetReportDisplay.js        | 164 ++++++++----------
 8 files changed, 96 insertions(+), 136 deletions(-)

diff --git a/apps/OpenSign/src/components/dashboard/DashboardReport.js b/apps/OpenSign/src/components/dashboard/DashboardReport.js
index 842726f1b..787162114 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardReport.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardReport.js
@@ -121,11 +121,8 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div className="h-[250px] flex justify-center items-center">
-          <div
-            style={{ fontSize: "45px", color: "#3dd3e0" }}
-            className="loader-37"
-          ></div>
+        <div className="h-[250px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+          <div className="loader-37"></div>
         </div>
       ) : (
         <>
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index 660f910ca..d85b254b7 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -21,16 +21,8 @@ const GetDashboard = (props) => {
     <>
       <Suspense
         fallback={
-          <div style={{ height: "300px" }}>
-            <div
-              style={{
-                marginLeft: "45%",
-                marginTop: "150px",
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
+          <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+            <div className="loader-37"></div>
           </div>
         }
       >
@@ -53,16 +45,8 @@ const GetDashboard = (props) => {
           >
             <Suspense
               fallback={
-                <div style={{ height: "300px" }}>
-                  <div
-                    style={{
-                      marginLeft: "45%",
-                      marginTop: "150px",
-                      fontSize: "45px",
-                      color: "#3dd3e0"
-                    }}
-                    className="loader-37"
-                  ></div>
+                <div className="h-[300px] text-[45px] text-[#3dd3e0] flex justify-center items-center">
+                  <div className="loader-37"></div>
                 </div>
               }
             >
@@ -72,7 +56,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -107,7 +90,6 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
-                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index 835a81db8..bfb9c6ec4 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -108,7 +108,7 @@ const SignersInput = (props) => {
       <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
-        <span className="absolute ml-1 text-xs z-50">
+        <span className="absolute ml-1 text-xs z-30">
           <Tooltip
             id={"signer-tooltip"}
             message={
diff --git a/apps/OpenSign/src/components/sidebar/Menu.js b/apps/OpenSign/src/components/sidebar/Menu.js
index 7b5f291a9..1b2a3b852 100644
--- a/apps/OpenSign/src/components/sidebar/Menu.js
+++ b/apps/OpenSign/src/components/sidebar/Menu.js
@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
         }
         className={({ isActive }) =>
           `${
-            isActive ? "bg-base-300" : ""
-          } mx-auto p-3 lg:p-4 flex items-center text-base-content hover:text-base-content hover:bg-base-300 cursor-pointer hover:no-underline`
+            isActive ? " bg-base-300" : ""
+          } flex items-center text-left p-3 lg:p-4 hover:text-base-content hover:bg-base-300 hover:no-underline focus:outline-none`
         }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js
index 7aa292b08..14bfee5c9 100644
--- a/apps/OpenSign/src/components/sidebar/Sidebar.js
+++ b/apps/OpenSign/src/components/sidebar/Sidebar.js
@@ -66,7 +66,10 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
           </p>
         </div>
       </div>
-      <nav aria-label="OpenSign Sidebar Navigation">
+      <nav
+        className="opmenu opmenu-sm"
+        aria-label="OpenSign Sidebar Navigation"
+      >
         <ul
           className="text-sm"
           role="menubar"
diff --git a/apps/OpenSign/src/components/sidebar/SubMenu.js b/apps/OpenSign/src/components/sidebar/SubMenu.js
index cdf289ef5..3ee9f8640 100644
--- a/apps/OpenSign/src/components/sidebar/SubMenu.js
+++ b/apps/OpenSign/src/components/sidebar/SubMenu.js
@@ -7,7 +7,7 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
     <li role="none">
       <button
         onClick={() => toggleSubmenu(item.title)}
-        className="w-full flex items-center text-left text-base-content p-3 lg:p-4 hover:bg-base-300 focus:outline-none hover:text-base-content "
+        className="flex items-center text-left p-3 lg:p-4 focus:outline-none hover:text-base-content "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -38,7 +38,7 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
                 className={({ isActive }) =>
                   `${
                     isActive ? "bg-base-300" : ""
-                  } mx-auto text-base-content hover:text-base-content hover:bg-base-300 block pl-6 md:pl-8 py-2 text-sm cursor-pointer hover:no-underline`
+                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer hover:text-base-content focus:outline-none hover:no-underline`
                 }
                 onClick={closeSidebar}
                 role="menuitem"
diff --git a/apps/OpenSign/src/pages/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js
index 28a13345a..20b03527e 100644
--- a/apps/OpenSign/src/pages/Dashboard.js
+++ b/apps/OpenSign/src/pages/Dashboard.js
@@ -11,9 +11,8 @@ const Dashboard = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { id } = useParams();
-  const [dashboard, setdashboard] = useState([]);
+  const [dashboard, setdashboard] = useState({});
   const [loading, setloading] = useState(true);
-  const [defaultQuery, setDefaultQuery] = useState("");
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -47,9 +46,6 @@ const Dashboard = () => {
           };
         });
       dispatch(saveTourSteps(dashboardTour));
-      if (localStorage.getItem("DashboardDefaultFilter")) {
-        setDefaultQuery(localStorage.getItem("DashboardDefaultFilter"));
-      }
       setloading(false);
     } catch (e) {
       console.error("Problem", e);
@@ -61,19 +57,11 @@ const Dashboard = () => {
     <React.Fragment>
       <Title title="Dashboard" />
       {loading ? (
-        <div style={{ height: "300px", backgroundColor: "white" }}>
-          <div
-            style={{
-              marginLeft: "45%",
-              marginTop: "150px",
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[300px] text-[45px] text-[#3dd3e0] w-full bg-white flex justify-center items-center rounded-md">
+          <div className="loader-37"></div>
         </div>
       ) : (
-        <GetDashboard dashboard={dashboard} DefaultQuery={defaultQuery} />
+        <GetDashboard dashboard={dashboard} />
       )}
     </React.Fragment>
   );
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 128dcb067..9f295595c 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -884,11 +884,8 @@ const ReportTable = (props) => {
   return (
     <div className="relative">
       {Object.keys(actLoader)?.length > 0 && (
-        <div className="absolute w-full h-full rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-          <div
-            style={{ fontSize: "45px", color: "#3dd3e0" }}
-            className="loader-37"
-          ></div>
+        <div className="absolute w-full h-full text-[45px] text-[#3dd3e0] rounded-md flex justify-center items-center bg-black bg-opacity-30 z-30">
+          <div className="loader-37"></div>
         </div>
       )}
       <div className="p-2 overflow-x-scroll w-full bg-white rounded-xl">
@@ -1044,7 +1041,6 @@ const ReportTable = (props) => {
                         {formatRow(item?.ExtUserPtr)}
                       </td>
                       <td className="px-4 py-2">
-                        {/* {item?.Signers ? formatRow(item?.Signers) : "-"} */}
                         {item?.Placeholders ? (
                           <button
                             onClick={() => handleViewSigners(item)}
@@ -1224,58 +1220,66 @@ const ReportTable = (props) => {
                             )}
                           </td>
                         )}
-                      <td className="px-2 py-2 text-white flex flex-row gap-x-2 gap-y-1 justify-center items-center">
-                        {props.actions?.length > 0 &&
-                          props.actions.map((act, index) => (
-                            <button
-                              data-tut={act?.selector}
-                              key={index}
-                              onClick={() => handleActionBtn(act, item)}
-                              className={`${
-                                act.action === "option" ? "" : "rounded shadow"
-                              } ${
-                                act.btnLabel ? "py-[3px] px-1.5" : "py-1.5 px-2"
-                              } relative text-center flex items-center justify-center focus:outline-none`}
-                              title={act.hoverLabel}
-                              style={{
-                                backgroundColor: act.btnColor
-                                  ? act.btnColor
-                                  : "#3ac9d6",
-                                color: act?.textColor ? act?.textColor : "white"
-                              }}
-                            >
-                              <i className={act.btnIcon}></i>
-                              {act.btnLabel && (
-                                <span className="ml-[4px] uppercase font-medium">
-                                  {act.btnLabel}
-                                </span>
-                              )}
-                              {isOption[item.objectId] &&
-                                act.action === "option" && (
-                                  <div className="absolute -right-2 top-5 p-1.5 bg-white text-nowrap rounded shadow-md z-[20] overflow-hidden">
-                                    {act.subaction?.map((subact) => (
-                                      <div
-                                        key={subact.btnId}
-                                        className="hover:bg-gray-300 rounded cursor-pointer px-2 py-1.5 flex justify-start items-center text-black"
-                                        onClick={() =>
-                                          handleActionBtn(subact, item)
-                                        }
-                                        title={subact.hoverLabel}
-                                      >
-                                        <i
-                                          className={`${subact.btnIcon} mr-1.5`}
-                                        ></i>
-                                        {subact.btnLabel && (
-                                          <span className="ml-[4px] text-[13px] capitalize font-medium">
-                                            {subact.btnLabel}
-                                          </span>
-                                        )}
-                                      </div>
-                                    ))}
-                                  </div>
+                      <td className="px-2 py-2">
+                        <div className="text-white flex flex-row gap-x-2 gap-y-1 justify-start items-center">
+                          {props.actions?.length > 0 &&
+                            props.actions.map((act, index) => (
+                              <button
+                                data-tut={act?.selector}
+                                key={index}
+                                onClick={() => handleActionBtn(act, item)}
+                                className={`${
+                                  act.action === "option"
+                                    ? ""
+                                    : "rounded shadow"
+                                } ${
+                                  act.btnLabel
+                                    ? "py-[3px] px-1.5"
+                                    : "py-1.5 px-2"
+                                } relative text-center flex text-nowrap items-center justify-center focus:outline-none`}
+                                title={act.hoverLabel}
+                                style={{
+                                  backgroundColor: act.btnColor
+                                    ? act.btnColor
+                                    : "#3ac9d6",
+                                  color: act?.textColor
+                                    ? act?.textColor
+                                    : "white"
+                                }}
+                              >
+                                <i className={act.btnIcon}></i>
+                                {act.btnLabel && (
+                                  <span className="ml-[4px] uppercase font-medium">
+                                    {act.btnLabel}
+                                  </span>
                                 )}
-                            </button>
-                          ))}
+                                {isOption[item.objectId] &&
+                                  act.action === "option" && (
+                                    <div className="absolute -right-2 top-5 p-1.5 bg-white text-nowrap rounded shadow-md z-[20] overflow-hidden">
+                                      {act.subaction?.map((subact) => (
+                                        <div
+                                          key={subact.btnId}
+                                          className="hover:bg-gray-300 rounded cursor-pointer px-2 py-1.5 flex justify-start items-center text-black"
+                                          onClick={() =>
+                                            handleActionBtn(subact, item)
+                                          }
+                                          title={subact.hoverLabel}
+                                        >
+                                          <i
+                                            className={`${subact.btnIcon} mr-1.5`}
+                                          ></i>
+                                          {subact.btnLabel && (
+                                            <span className="ml-[4px] text-[13px] capitalize font-medium">
+                                              {subact.btnLabel}
+                                            </span>
+                                          )}
+                                        </div>
+                                      ))}
+                                    </div>
+                                  )}
+                              </button>
+                            ))}
+                        </div>
                         {isViewShare[item.objectId] && (
                           <div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
                             <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
@@ -1359,11 +1363,8 @@ const ReportTable = (props) => {
                             handleClose={() => setIsBulkSend({})}
                           >
                             {isLoader[item.objectId] ? (
-                              <div className="w-full h-[100px] md:h-[100px] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                <div
-                                  style={{ fontSize: "45px", color: "#3dd3e0" }}
-                                  className="loader-37"
-                                ></div>
+                              <div className="w-full h-[100px] text-[45px] text-[#3dd3e0] rounded-b-md flex justify-center items-center bg-black bg-opacity-30 z-30">
+                                <div className="loader-37"></div>
                               </div>
                             ) : (
                               <BulkSendUi
@@ -1466,17 +1467,10 @@ const ReportTable = (props) => {
                                   {isNextStep[user.objectId] && (
                                     <div className="relative ">
                                       {actLoader[user.objectId] && (
-                                        <div className="absolute w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
-                                          <div
-                                            style={{
-                                              fontSize: "45px",
-                                              color: "#3dd3e0"
-                                            }}
-                                            className="loader-37"
-                                          ></div>
+                                        <div className="absolute text-[45px] text-[#3dd3e0] w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-30">
+                                          <div className="loader-37"></div>
                                         </div>
                                       )}
-
                                       <form
                                         onSubmit={(e) =>
                                           handleResendMail(e, item, user)
@@ -1563,14 +1557,12 @@ const ReportTable = (props) => {
         </table>
         <div className="opjoin flex flex-wrap items-center p-2 ">
           {props.List.length > props.docPerPage && (
-            <>
-              <button
-                onClick={() => paginateBack()}
-                className="opjoin-item opbtn "
-              >
-                Prev
-              </button>
-            </>
+            <button
+              onClick={() => paginateBack()}
+              className="opjoin-item opbtn "
+            >
+              Prev
+            </button>
           )}
           {pageNumbers.map((x, i) => (
             <button
@@ -1585,14 +1577,12 @@ const ReportTable = (props) => {
             </button>
           ))}
           {props.List.length > props.docPerPage && (
-            <>
-              <button
-                onClick={() => paginateFront()}
-                className="opjoin-item opbtn"
-              >
-                Next
-              </button>
-            </>
+            <button
+              onClick={() => paginateFront()}
+              className="opjoin-item opbtn"
+            >
+              Next
+            </button>
           )}
         </div>
         {props.List?.length <= 0 && (