diff --git a/apps/OpenSign/src/components/dashboard/DashboardButton.js b/apps/OpenSign/src/components/dashboard/DashboardButton.js index d1f37ea7e..2c8fecd91 100644 --- a/apps/OpenSign/src/components/dashboard/DashboardButton.js +++ b/apps/OpenSign/src/components/dashboard/DashboardButton.js @@ -26,18 +26,18 @@ const DashboardButton = (props) => { props.Data && props.Data.Redirect_type ? "cursor-pointer" : "cursor-default" - } w-full px-3 py-2 flex text-white rounded-md shadow overflow-hidden`} + } w-full shadow-md px-3 py-2 opcard bg-base-100`} > -
- +
+ -
-
{props.Label}
+
+ {props.Label}
diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js index 4d18fd061..c14547357 100644 --- a/apps/OpenSign/src/components/dashboard/DashboardCard.js +++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js @@ -336,9 +336,9 @@ const DashboardCard = (props) => { props.Data && props.Data.Redirect_type ? "cursor-pointer" : "cursor-default" - } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`} + }`} > -
+
{ } text-[25px] lg:text-[30px]`} > -
+
{props.Label}
{loading ?
: setFormat(response)}
-
- +
+
); diff --git a/apps/OpenSign/src/components/dashboard/DashboardReport.js b/apps/OpenSign/src/components/dashboard/DashboardReport.js index 468347e68..842726f1b 100644 --- a/apps/OpenSign/src/components/dashboard/DashboardReport.js +++ b/apps/OpenSign/src/components/dashboard/DashboardReport.js @@ -121,19 +121,9 @@ function DashboardReport(props) { return ( <> {isLoader ? ( -
+
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js index c78abcb01..233d9064a 100644 --- a/apps/OpenSign/src/components/dashboard/GetDashboard.js +++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js @@ -18,7 +18,7 @@ const buttonList = [ ]; const GetDashboard = (props) => { const Button = ({ label, redirectId, redirectType, icon }) => ( -
+ <> @@ -40,14 +40,14 @@ const GetDashboard = (props) => { Data={{ Redirect_type: redirectType, Redirect_id: redirectId }} /> -
+ ); const renderSwitchWithTour = (col) => { switch (col.widget.type) { case "Card": return (
@@ -89,7 +89,7 @@ const GetDashboard = (props) => { ); } default: - return null; + return <>; } }; const renderSwitch = (col) => { @@ -97,7 +97,7 @@ const GetDashboard = (props) => { case "Card": return (
please wait
}> @@ -122,7 +122,7 @@ const GetDashboard = (props) => { ); } default: - return null; + return <>; } }; return ( @@ -130,7 +130,7 @@ const GetDashboard = (props) => {
{buttonList.map((btn) => (
- {props.dashboard.map((val, key) => ( -
- {val.columns.map((col, i) => - col.widget.data && col.widget.data.tourSection ? ( -
- {renderSwitchWithTour(col)} -
- ) : ( -
- {renderSwitch(col)} -
- ) - )} -
- ))} +
+ {props?.dashboard?.columns?.map((col, i) => + col.widget.data && col.widget.data.tourSection ? ( +
+ {renderSwitchWithTour(col)} +
+ ) : ( +
+ {renderSwitch(col)} +
+ ) + )} +
); }; diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js index d19d61e6b..7aa292b08 100644 --- a/apps/OpenSign/src/components/sidebar/Sidebar.js +++ b/apps/OpenSign/src/components/sidebar/Sidebar.js @@ -56,8 +56,12 @@ const Sidebar = ({ isOpen, closeSidebar }) => { />
-

{username}

-

+

{username}

+

{tenantname}

diff --git a/apps/OpenSign/src/json/dashboardJson.js b/apps/OpenSign/src/json/dashboardJson.js new file mode 100644 index 000000000..0a2837432 --- /dev/null +++ b/apps/OpenSign/src/json/dashboardJson.js @@ -0,0 +1,100 @@ +const dashboardJson = [ + { + id: "35KBoSgoAK", + columns: [ + { + colxs: "12", + colmd: "6", + collg: "6", + widget: { + type: "Card", + icon: "fas fa-signature", + bgColor: "#f0058e", + label: "Need your Signature", + description: null, + data: { + id: "e04ee9dc-932d-6b80-0202-703fd154eb74", + queryType: "", + class: "contracts_Document", + query: + 'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1', + key: "count", + Redirect_type: "Report", + Redirect_id: "4Hhwbp482K", + tourSection: "tourcard1", + tourMessage: + "Clicking on this card will take you to the list of documents awaiting your review." + } + } + }, + { + colxs: "12", + colmd: "6", + collg: "6", + widget: { + type: "Card", + icon: "fas fa-sign-out-alt", + bgColor: "#g0058e", + label: "Out for signatures", + description: null, + data: { + id: "c1935cc0-28d4-3d73-b72a-8c1e3d18a17f", + queryType: "", + class: "contracts_Document", + query: + 'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1', + key: "count", + Redirect_type: "Report", + Redirect_id: "1MwEuxLEkF", + tourSection: "tourcard2", + tourMessage: + "Clicking on this card will take you to a list of documents awaiting signature." + } + } + }, + { + colxs: "12", + colmd: "6", + collg: "6", + widget: { + type: "report", + reportId: "5Go51Q7T8r", + data: { + tourSection: "tourreport1", + tourMessage: + "This is a list of documents that are waiting for your signature." + } + } + }, + { + colxs: "12", + colmd: "6", + collg: "6", + widget: { + type: "report", + reportId: "d9k3UfYHBc", + data: { + tourSection: "tourreport2", + tourMessage: + "This is a list of documents you've sent to other parties for signature." + } + } + }, + { + colxs: "12", + colmd: "12", + collg: "12", + widget: { + type: "report", + reportId: "kC5mfynCi4", + data: { + tourSection: "tourreport3", + tourMessage: + "This are documents you have started but have not finalized for sending." + } + } + } + ] + } +]; +export default dashboardJson; diff --git a/apps/OpenSign/src/pages/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js index 7b82b2638..af31fbf7e 100644 --- a/apps/OpenSign/src/pages/Dashboard.js +++ b/apps/OpenSign/src/pages/Dashboard.js @@ -1,11 +1,11 @@ import React, { useState, useEffect } from "react"; -import Parse from "parse"; import "../styles/loader.css"; import GetDashboard from "../components/dashboard/GetDashboard"; import { useNavigate, useParams } from "react-router-dom"; import Title from "../components/Title"; import { useDispatch } from "react-redux"; import { saveTourSteps } from "../redux/reducers/TourStepsReducer"; +import dashboardJson from "../json/dashboardJson"; const Dashboard = () => { const navigate = useNavigate(); @@ -13,7 +13,7 @@ const Dashboard = () => { const { id } = useParams(); const [dashboard, setdashboard] = useState([]); const [classnameArray, setclassnameArray] = useState([]); - const [loading, setloading] = useState(false); + const [loading, setloading] = useState(true); const [defaultQuery, setDefaultQuery] = useState(""); useEffect(() => { @@ -30,53 +30,27 @@ const Dashboard = () => { }, [id]); const getDashboard = async (id) => { - setloading(true); try { - var forms = Parse.Object.extend("w_dashboard"); - var query = new Parse.Query(forms); - query.equalTo("objectId", id); - const results = await query.first(); - const resultjson = results.toJSON(); + const dashboard = dashboardJson.find((x) => x.id === id); let classArray = []; - let DefaultQuery = ""; - resultjson.rows.forEach((x) => { - let col_lg = "", - col_md = "", - col_xs = "", - col_sm = "", - col_ = "", - obj = {}; - let subItem = []; + dashboard?.columns?.forEach((row) => { let item = ""; - x.columns.forEach((y) => { - if (y.widget.type === "customeHtml") { - DefaultQuery = y.widget.data[0].default; - } - if (Number(y["collg"]) > 0) { - col_lg = "col-lg-" + y["collg"]; - } - if (Number(y["colmd"]) > 0) { - col_md = "col-md-" + y["colmd"]; - } - if (Number(y["colxs"]) > 0) { - col_xs = "col-xs-" + y["colxs"]; - } - if (Number(y["colsm"]) > 0) { - col_sm = "col-sm-" + y["colsm"]; - } - if (Number(y["col"]) > 0) { - col_ = "col-" + y["col"]; - } - item = - col_lg + " " + col_md + " " + col_xs + " " + col_sm + " " + col_; - subItem.push(item); - }); - obj = subItem; - classArray.push(obj); + if (row?.colxs) { + item += " col-span-" + row?.colxs; + } + if (row?.colmd) { + item += " md:col-span-" + row?.colmd; + } + if (row?.collg) { + item += " lg:col-span-" + row?.collg + " "; + } + if (!row?.colxs && !row?.colmd && !row?.collg) { + item += "col-span-12"; + } + classArray.push(item); }); - setdashboard(resultjson.rows); - // console.log("resultjson.rows ", resultjson.rows); - const arr = resultjson.rows[0].columns + setdashboard(dashboard); + const dashboardTour = dashboard.columns .filter((col) => { if (col.widget.data && col.widget.data.tourSection) { return col; @@ -90,13 +64,10 @@ const Dashboard = () => { // style: { backgroundColor: "#abd4d2" }, }; }); - dispatch(saveTourSteps(arr)); - // console.log("arr ", arr); + dispatch(saveTourSteps(dashboardTour)); setclassnameArray(classArray); if (localStorage.getItem("DashboardDefaultFilter")) { setDefaultQuery(localStorage.getItem("DashboardDefaultFilter")); - } else { - setDefaultQuery(DefaultQuery); } setloading(false); } catch (e) { @@ -105,32 +76,28 @@ const Dashboard = () => { } }; - let _dash = ( - - ); - if (loading) { - _dash = ( -
-
-
- ); - } return ( - {_dash} + {loading ? ( + <div style={{ height: "300px", backgroundColor: "white" }}> + <div + style={{ + marginLeft: "45%", + marginTop: "150px", + fontSize: "45px", + color: "#3dd3e0" + }} + className="loader-37" + ></div> + </div> + ) : ( + <GetDashboard + dashboard={dashboard} + classnameArray={classnameArray} + DefaultQuery={defaultQuery} + /> + )} </React.Fragment> ); }; diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index a0e5191ed..128dcb067 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect } from "react"; import pad from "../assets/images/pad.svg"; import { useNavigate } from "react-router-dom"; import axios from "axios"; @@ -60,13 +60,65 @@ const ReportTable = (props) => { const { isMoreDocs, setIsNextRecord } = props; // For loop is used to calculate page numbers visible below table // Initialize pageNumbers using useMemo to avoid unnecessary re-creation - const pageNumbers = useMemo(() => { - const calculatedPageNumbers = []; - for (let i = 1; i <= Math.ceil(props.List.length / props.docPerPage); i++) { - calculatedPageNumbers.push(i); + // const pageNumbers = useMemo(() => { + // const calculatedPageNumbers = []; + // for (let i = 1; i <= Math.ceil(props.List.length / props.docPerPage); i++) { + // calculatedPageNumbers.push(i); + // } + // return calculatedPageNumbers; + // }, [props.List, props.docPerPage]); + const getPaginationRange = () => { + const totalPageNumbers = 7; // Adjust this value to show more/less page numbers + const pages = []; + const totalPages = Math.ceil(props.List.length / props.docPerPage); + if (totalPages <= totalPageNumbers) { + for (let i = 1; i <= totalPages; i++) { + pages.push(i); + } + } else { + const leftSiblingIndex = Math.max(currentPage - 1, 1); + const rightSiblingIndex = Math.min(currentPage + 1, totalPages); + + const showLeftDots = leftSiblingIndex > 2; + const showRightDots = rightSiblingIndex < totalPages - 2; + + const firstPageIndex = 1; + const lastPageIndex = totalPages; + + if (!showLeftDots && showRightDots) { + let leftItemCount = 3; + let leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1); + + pages.push(...leftRange); + pages.push("..."); + pages.push(totalPages); + } else if (showLeftDots && !showRightDots) { + let rightItemCount = 3; + let rightRange = Array.from( + { length: rightItemCount }, + (_, i) => totalPages - rightItemCount + i + 1 + ); + + pages.push(firstPageIndex); + pages.push("..."); + pages.push(...rightRange); + } else if (showLeftDots && showRightDots) { + let middleRange = Array.from( + { length: 3 }, + (_, i) => leftSiblingIndex + i + ); + + pages.push(firstPageIndex); + pages.push("..."); + pages.push(...middleRange); + pages.push("..."); + pages.push(lastPageIndex); + } } - return calculatedPageNumbers; - }, [props.List, props.docPerPage]); + + return pages; + }; + const pageNumbers = getPaginationRange(); // below useEffect reset currenpage to 1 if user change route useEffect(() => { checkTourStatus(); @@ -839,7 +891,7 @@ const ReportTable = (props) => { ></div> </div> )} - <div className="p-2 overflow-x-scroll w-full bg-white rounded-md"> + <div className="p-2 overflow-x-scroll w-full bg-white rounded-xl"> {isCelebration && ( <div style={{ position: "relative", zIndex: "1000" }}> <Confetti width={window.innerWidth} height={window.innerHeight} /> @@ -1509,46 +1561,42 @@ const ReportTable = (props) => { )} </tbody> </table> - <div className="flex flex-wrap items-center gap-2 p-2 "> + <div className="opjoin flex flex-wrap items-center p-2 "> {props.List.length > props.docPerPage && ( <> - {currentPage > 1 && ( - <button - onClick={() => paginateBack()} - className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none" - > - Prev - </button> - )} + <button + onClick={() => paginateBack()} + className="opjoin-item opbtn " + > + Prev + </button> </> )} - {pageNumbers.map((x) => ( + {pageNumbers.map((x, i) => ( <button - key={x} + key={i} onClick={() => setCurrentPage(x)} - className=" bg-sky-400 text-white rounded px-3 py-2 focus:outline-none" + disabled={x === "..."} + className={`${ + x === currentPage ? "opbtn-active" : "" + } opjoin-item opbtn`} > {x} </button> ))} - {isMoreDocs && ( - <button className="text-black rounded px-1 py-2">...</button> - )} {props.List.length > props.docPerPage && ( <> - {pageNumbers.includes(currentPage + 1) && ( - <button - onClick={() => paginateFront()} - className="bg-blue-400 text-white rounded px-3 py-2 focus:outline-none" - > - Next - </button> - )} + <button + onClick={() => paginateFront()} + className="opjoin-item opbtn" + > + Next + </button> </> )} </div> {props.List?.length <= 0 && ( - <div className="flex flex-col items-center justify-center w-full bg-white rounded py-4"> + <div className="flex flex-col items-center justify-center w-full bg-white rounded-xl py-4"> <div className="w-[60px] h-[60px] overflow-hidden"> <img className="w-full h-full object-contain"