mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-28 10:49:41 +02:00
feat: implement dasyui in header, footer & report
This commit is contained in:
prafull-opensignlabs
Generated
+45
@@ -58,6 +58,7 @@
|
||||
"@babel/runtime-corejs2": "^7.24.6",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"commitizen": "^4.3.0",
|
||||
"daisyui": "^4.11.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
@@ -9041,6 +9042,16 @@
|
||||
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
|
||||
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
|
||||
},
|
||||
"node_modules/css-selector-tokenizer": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
|
||||
"integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cssesc": "^3.0.0",
|
||||
"fastparse": "^1.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/css-to-react-native": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
|
||||
@@ -9264,6 +9275,15 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/culori": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
|
||||
"integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cz-conventional-changelog": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz",
|
||||
@@ -9284,6 +9304,25 @@
|
||||
"@commitlint/load": ">6.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/daisyui": {
|
||||
"version": "4.11.1",
|
||||
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.11.1.tgz",
|
||||
"integrity": "sha512-obT9CUbQdW6eoHwSeT5VwaRrWlwrM4OT5qlfdJ0oQlSIEYhwnEl2+L2fwu5PioLbitwuMdYC2X8I1cyy8Pf6LQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"css-selector-tokenizer": "^0.8",
|
||||
"culori": "^3",
|
||||
"picocolors": "^1",
|
||||
"postcss-js": "^4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.9.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/daisyui"
|
||||
}
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||
@@ -11119,6 +11158,12 @@
|
||||
"punycode": "^1.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/fastparse": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
|
||||
"integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
||||
|
||||
@@ -88,6 +88,7 @@
|
||||
"@babel/runtime-corejs2": "^7.24.6",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"commitizen": "^4.3.0",
|
||||
"daisyui": "^4.11.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-react": "^7.34.1",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="emerald">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@@ -50,4 +50,4 @@
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -45,12 +45,16 @@ const Footer = () => {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="bg-[#222c3c] text-[#98a6ba] text-center text-[13px] py-3">
|
||||
All Rights Reserved © {new Date().getFullYear()}
|
||||
<span onClick={openUrl} className="hover:underline cursor-pointer">
|
||||
{appName} ( version: {version ? version : `${Package.version} `})
|
||||
</span>
|
||||
</div>
|
||||
<footer className="opfooter opfooter-center py-3 bg-base-300 text-base-content text-center text-[13px]">
|
||||
<aside>
|
||||
<p>
|
||||
All Rights Reserved © {new Date().getFullYear()}
|
||||
<span onClick={openUrl} className="hover:underline cursor-pointer">
|
||||
{appName} ( version: {version ? version : `${Package.version} `})
|
||||
</span>
|
||||
</p>
|
||||
</aside>
|
||||
</footer>
|
||||
<button
|
||||
className={`${
|
||||
showButton ? "block" : "hidden"
|
||||
|
||||
@@ -89,14 +89,16 @@ const Header = ({ showSidebar }) => {
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-row justify-between items-center gap-x-3 md:gap-x-4 bg-white md:px-4 px-2 shadow h-[50px] md:w-full ">
|
||||
<button
|
||||
className="cursor-pointer focus:outline-none"
|
||||
onClick={showSidebar}
|
||||
>
|
||||
<i className={`fa-solid fa-bars text-xl `}></i>
|
||||
</button>
|
||||
<div className="flex-1">
|
||||
<div className="opnavbar bg-base-100 shadow">
|
||||
<div className="flex-none">
|
||||
<button
|
||||
className="opbtn opbtn-square opbtn-ghost focus:outline-none"
|
||||
onClick={showSidebar}
|
||||
>
|
||||
<i className="fa-solid fa-bars text-xl text-black"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 ml-2">
|
||||
<div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
|
||||
<img
|
||||
className="object-contain h-full w-auto"
|
||||
@@ -105,10 +107,7 @@ const Header = ({ showSidebar }) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="profile-menu"
|
||||
className="flex justify-between items-center gap-x-3"
|
||||
>
|
||||
<div className="flex-none gap-2">
|
||||
{!isSubscribe && (
|
||||
<div>
|
||||
<button
|
||||
@@ -144,56 +143,61 @@ const Header = ({ showSidebar }) => {
|
||||
{username && username}
|
||||
</div>
|
||||
)}
|
||||
<div className="relative">
|
||||
<div className="cursor-pointer">
|
||||
<i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
|
||||
<div className="opdropdown opdropdown-end" id="profile-menu">
|
||||
<div tabIndex={0} role="button" className="opbtn opbtn-ghost">
|
||||
<div className="">
|
||||
<i
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={toggleDropdown}
|
||||
className="fa-solid fa-angle-down"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`dropdown absolute text-sm text-gray-700 font-light right-0 mt-4 p-1 w-48 bg-white border rounded-lg shadow-lg z-10 ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="mt-3 z-[1] p-2 shadow opmenu opmenu-sm opdropdown-content bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<ul>
|
||||
<li
|
||||
className="hover:bg-gray-100 rounded-t-lg py-1 px-2 cursor-pointer font-normal"
|
||||
onClick={() => openInNewTab("https://docs.opensignlabs.com")}
|
||||
>
|
||||
<li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
|
||||
<span>
|
||||
<i className="fa-solid fa-book"></i> Docs
|
||||
</li>
|
||||
<li
|
||||
className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
navigate("/profile");
|
||||
}}
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
navigate("/profile");
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<i className="fa-regular fa-user"></i> Profile
|
||||
</li>
|
||||
<li
|
||||
className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
navigate("/changepassword");
|
||||
}}
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
navigate("/changepassword");
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<i className="fa-solid fa-lock"></i> Change Password
|
||||
</li>
|
||||
<li
|
||||
className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
|
||||
onClick={() => {
|
||||
window.open("https://console.opensignlabs.com/");
|
||||
}}
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => {
|
||||
window.open("https://console.opensignlabs.com/");
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<i className="fa-regular fa-id-card"></i> Console
|
||||
</li>
|
||||
<li
|
||||
className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
|
||||
onClick={closeDropdown}
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li onClick={closeDropdown}>
|
||||
<span>
|
||||
<i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -111,7 +111,9 @@ const SignersInput = (props) => {
|
||||
<span className="absolute ml-1 text-xs z-50">
|
||||
<Tooltip
|
||||
id={"signer-tooltip"}
|
||||
message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
|
||||
message={
|
||||
"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."
|
||||
}
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
@@ -133,16 +135,7 @@ const SignersInput = (props) => {
|
||||
setIsModel(true);
|
||||
openModal();
|
||||
}}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
borderRadius: 4,
|
||||
border: "1px solid #ccc",
|
||||
minHeight: 38,
|
||||
minWidth: 48,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center"
|
||||
}}
|
||||
className="cursor-pointer rounded border-[1px] border-[#ccc] min-h-[38px] min-w-[48px] flex justify-center items-center"
|
||||
>
|
||||
<i className="fas fa-plus"></i>
|
||||
</div>
|
||||
|
||||
@@ -35,8 +35,8 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
|
||||
${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
|
||||
className={`absolute md:relative bg-white text-[#444] h-screen overflow-y-auto transition-all z-40 hide-scrollbar
|
||||
${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
|
||||
>
|
||||
<div className="flex px-2 py-3 gap-2 items-center shadow-md">
|
||||
<div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
|
||||
|
||||
@@ -2,17 +2,16 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body{
|
||||
background-color: white;
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* Custom CSS to hide scrollbar */
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@@ -667,10 +667,11 @@ const Forms = (props) => {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2 justify-center items-center">
|
||||
<div className="flex gap-2 justify-center items-center ">
|
||||
<input
|
||||
type="file"
|
||||
className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opfile-input opfile-input-bordered opfile-input-sm w-full text-xs"
|
||||
// className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
onChange={(e) => handleFileInput(e)}
|
||||
ref={inputFileRef}
|
||||
accept={
|
||||
@@ -698,7 +699,8 @@ const Forms = (props) => {
|
||||
</label>
|
||||
<input
|
||||
name="Name"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opinput opinput-bordered w-full opinput-sm text-xs"
|
||||
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
value={formData.Name}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
required
|
||||
@@ -708,7 +710,8 @@ const Forms = (props) => {
|
||||
<label className="block">Description</label>
|
||||
<input
|
||||
name="Description"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opinput opinput-bordered w-full opinput-sm text-xs"
|
||||
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
value={formData.Description}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
/>
|
||||
@@ -726,7 +729,8 @@ const Forms = (props) => {
|
||||
</label>
|
||||
<input
|
||||
name="Note"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opinput opinput-bordered w-full opinput-sm text-xs"
|
||||
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
value={formData.Note}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
required
|
||||
@@ -748,7 +752,8 @@ const Forms = (props) => {
|
||||
<input
|
||||
type="number"
|
||||
name="TimeToCompleteDays"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opinput opinput-bordered w-full opinput-sm text-xs"
|
||||
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
value={formData.TimeToCompleteDays}
|
||||
onChange={(e) => handleStrInput(e)}
|
||||
required
|
||||
@@ -822,6 +827,7 @@ const Forms = (props) => {
|
||||
<input
|
||||
type="radio"
|
||||
value={"true"}
|
||||
className="opradio opradio-xs"
|
||||
name="SendinOrder"
|
||||
checked={formData.SendinOrder === "true"}
|
||||
onChange={handleStrInput}
|
||||
@@ -833,6 +839,7 @@ const Forms = (props) => {
|
||||
type="radio"
|
||||
value={"false"}
|
||||
name="SendinOrder"
|
||||
className="opradio opradio-xs"
|
||||
checked={formData.SendinOrder === "false"}
|
||||
onChange={handleStrInput}
|
||||
/>
|
||||
@@ -857,7 +864,7 @@ const Forms = (props) => {
|
||||
Auto reminder{" "}
|
||||
{!isSubscribe && isEnableSubscription && <Upgrade />}
|
||||
</span>
|
||||
<label
|
||||
{/* <label
|
||||
className={`${
|
||||
isSubscribe || !isEnableSubscription
|
||||
? "cursor-pointer "
|
||||
@@ -872,6 +879,20 @@ const Forms = (props) => {
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600 mt-2"></div>
|
||||
</label> */}
|
||||
<label
|
||||
className={`${
|
||||
isSubscribe || !isEnableSubscription
|
||||
? "cursor-pointer "
|
||||
: "pointer-events-none opacity-50"
|
||||
} relative block items-center mb-0`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="optoggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
|
||||
checked={formData.autoreminder}
|
||||
onChange={handleAutoReminder}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{formData?.autoreminder === true && (
|
||||
@@ -884,7 +905,8 @@ const Forms = (props) => {
|
||||
type="number"
|
||||
value={formData.remindOnceInEvery}
|
||||
name="remindOnceInEvery"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="opinput opinput-bordered w-full opinput-sm text-xs"
|
||||
// className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
onChange={handleStrInput}
|
||||
required
|
||||
/>
|
||||
@@ -895,15 +917,19 @@ const Forms = (props) => {
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
className={`${
|
||||
isSubmit && "cursor-progress"
|
||||
} bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
|
||||
isSubmit ? "cursor-progress" : ""
|
||||
} opbtn opbtn-primary`}
|
||||
// className={`${
|
||||
// isSubmit && "cursor-progress"
|
||||
// } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
|
||||
type="submit"
|
||||
disabled={isSubmit}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<div
|
||||
className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
|
||||
className="opbtn opbtn-neutral"
|
||||
// className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
|
||||
onClick={() => handleReset()}
|
||||
>
|
||||
Reset
|
||||
|
||||
@@ -880,19 +880,20 @@ const ReportTable = (props) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<table className="table-auto w-full border-collapse">
|
||||
<table className="optable optable-zebra">
|
||||
{/* <table className="table-auto w-full border-collapse"> */}
|
||||
<thead className="text-[14px]">
|
||||
<tr className="border-y-[1px]">
|
||||
{props.heading?.map((item, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<th className="px-4 py-2 font-thin">{item}</th>
|
||||
<th className="px-4 py-2">{item}</th>
|
||||
</React.Fragment>
|
||||
))}
|
||||
{props.actions?.length > 0 && (
|
||||
<th className="px-4 py-2 font-thin">Action</th>
|
||||
)}
|
||||
{props.ReportName === "Templates" && isEnableSubscription && (
|
||||
<th className="px-4 py-2 font-thin">Public</th>
|
||||
<th className="px-4 py-2">Public</th>
|
||||
)}
|
||||
{props.actions?.length > 0 && (
|
||||
<th className="px-4 py-2">Action</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -903,7 +904,7 @@ const ReportTable = (props) => {
|
||||
props.ReportName === "Contactbook" ? (
|
||||
<tr className="border-y-[1px]" key={index}>
|
||||
{props.heading.includes("Sr.No") && (
|
||||
<td className="px-4 py-2">{startIndex + index + 1}</td>
|
||||
<th className="px-4 py-2">{startIndex + index + 1}</th>
|
||||
)}
|
||||
<td className="px-4 py-2 font-semibold">{item?.Name} </td>
|
||||
<td className="px-4 py-2">{item?.Email || "-"}</td>
|
||||
@@ -965,7 +966,7 @@ const ReportTable = (props) => {
|
||||
) : (
|
||||
<tr className="border-y-[1px]" key={index}>
|
||||
{props.heading.includes("Sr.No") && (
|
||||
<td className="px-4 py-2">{startIndex + index + 1}</td>
|
||||
<th className="px-4 py-2">{startIndex + index + 1}</th>
|
||||
)}
|
||||
<td className="px-4 py-2 font-semibold w-56">
|
||||
{item?.Name}{" "}
|
||||
@@ -1003,6 +1004,174 @@ const ReportTable = (props) => {
|
||||
"-"
|
||||
)}
|
||||
</td>
|
||||
{props.ReportName === "Templates" &&
|
||||
isEnableSubscription && (
|
||||
<td className=" pl-[20px] py-2">
|
||||
{props.ReportName === "Templates" && (
|
||||
<div className="flex flex-row-">
|
||||
<label
|
||||
className={
|
||||
"cursor-pointer relative inline-flex items-center mb-0"
|
||||
}
|
||||
>
|
||||
<input
|
||||
checked={isPublic?.[item.objectId]}
|
||||
onChange={(e) =>
|
||||
handlePublicChange(e, item)
|
||||
}
|
||||
type="checkbox"
|
||||
value=""
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{isMakePublic[item.objectId] && (
|
||||
<ModalUi
|
||||
isOpen
|
||||
title={
|
||||
isPublic[item.objectId]
|
||||
? "Make template public"
|
||||
: "Make template private"
|
||||
}
|
||||
handleClose={() => {
|
||||
setIsMakePublic({});
|
||||
setSelectedPublicRole("");
|
||||
setIsPublic((prevStates) => ({
|
||||
...prevStates,
|
||||
[item.objectId]: !prevStates[item.objectId]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
<div className="font-normal text-black">
|
||||
<p className="text-lg">
|
||||
{" "}
|
||||
{isPublic[item.objectId]
|
||||
? `Are you sure you want tof make this templat public ?`
|
||||
: `Are you sure you want to make this template private? This will remove it from your public profile ?`}
|
||||
</p>
|
||||
{isPublic[item.objectId] && (
|
||||
<div className="flex mt-2 gap-2 md:items-center">
|
||||
<p className="text-[15px]">
|
||||
Public role :{" "}
|
||||
</p>
|
||||
{item?.Placeholders?.length > 1 ? (
|
||||
<select
|
||||
className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]"
|
||||
name="textvalidate"
|
||||
value={selectedPublicRole}
|
||||
onChange={(e) =>
|
||||
setSelectedPublicRole(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
>
|
||||
<option
|
||||
disabled
|
||||
style={{ fontSize: "13px" }}
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{item?.Placeholders.map(
|
||||
(data, ind) => {
|
||||
return (
|
||||
<option
|
||||
style={{ fontSize: "13px" }}
|
||||
key={ind}
|
||||
value={data?.Role}
|
||||
>
|
||||
{data?.Role}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</select>
|
||||
) : (
|
||||
<div className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]">
|
||||
{item?.Placeholders[0]?.Role}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<hr className="bg-[#ccc] mt-2 " />
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
onClick={() => handlePublicTemplate(item)}
|
||||
className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
|
||||
style={{
|
||||
backgroundColor: modalSubmitBtnColor
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClose(item)}
|
||||
className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
|
||||
style={{
|
||||
backgroundColor: modalCancelBtnColor
|
||||
}}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
)}
|
||||
{isPublicProfile[item.objectId] && (
|
||||
<ModalUi
|
||||
isOpen
|
||||
title={"Public URL"}
|
||||
handleClose={() => {
|
||||
setIsPublicProfile({});
|
||||
}}
|
||||
reduceWidth={
|
||||
"md:min-w-[440px] md:max-w-[400px]"
|
||||
}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
{publicUserName ? (
|
||||
<div className="font-normal text-black">
|
||||
<p>
|
||||
Here’s your public URL. Copy or share it
|
||||
with the signer, and you will be able to
|
||||
see all your publicly set templates.
|
||||
</p>
|
||||
<div className=" flex items-center gap-5 mt-2 p-[2px] w-[75%]">
|
||||
<span className="font-bold">
|
||||
Public URL :{" "}
|
||||
</span>
|
||||
<span
|
||||
onClick={() => copytoProfileLink()}
|
||||
className="underline underline-offset-2 cursor-pointer"
|
||||
>{`https://opensign.me/${publicUserName}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-normal text-black">
|
||||
<p>
|
||||
Please add your public URL, and you will
|
||||
be able to make a public template.
|
||||
</p>
|
||||
<button
|
||||
className="px-4 py-1.5 mt-3 text-white rounded shadow-md text-center focus:outline-none "
|
||||
style={{
|
||||
backgroundColor: modalSubmitBtnColor
|
||||
}}
|
||||
onClick={() => navigate("/profile")}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
)}
|
||||
</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) => (
|
||||
@@ -1333,170 +1502,6 @@ const ReportTable = (props) => {
|
||||
</ModalUi>
|
||||
)}
|
||||
</td>
|
||||
{isEnableSubscription && (
|
||||
<td className=" pl-[20px] py-2 ">
|
||||
{props.ReportName === "Templates" && (
|
||||
<div className=" flex flex-row-">
|
||||
<label
|
||||
className={
|
||||
"cursor-pointer relative inline-flex items-center mb-0"
|
||||
}
|
||||
>
|
||||
<input
|
||||
checked={isPublic?.[item.objectId]}
|
||||
onChange={(e) => handlePublicChange(e, item)}
|
||||
type="checkbox"
|
||||
value=""
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
{isMakePublic[item.objectId] && (
|
||||
<ModalUi
|
||||
isOpen
|
||||
title={
|
||||
isPublic[item.objectId]
|
||||
? "Make template public"
|
||||
: "Make template private"
|
||||
}
|
||||
handleClose={() => {
|
||||
setIsMakePublic({});
|
||||
setSelectedPublicRole("");
|
||||
setIsPublic((prevStates) => ({
|
||||
...prevStates,
|
||||
[item.objectId]: !prevStates[item.objectId]
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
<div className="font-normal text-black">
|
||||
<p className="text-lg">
|
||||
{" "}
|
||||
{isPublic[item.objectId]
|
||||
? `Are you sure you want tof make this templat public ?`
|
||||
: `Are you sure you want to make this template private? This will remove it from your public profile ?`}
|
||||
</p>
|
||||
{isPublic[item.objectId] && (
|
||||
<div className="flex mt-2 gap-2 md:items-center">
|
||||
<p className="text-[15px]">
|
||||
Public role :{" "}
|
||||
</p>
|
||||
{item?.Placeholders?.length > 1 ? (
|
||||
<select
|
||||
className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]"
|
||||
name="textvalidate"
|
||||
value={selectedPublicRole}
|
||||
onChange={(e) =>
|
||||
setSelectedPublicRole(
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
>
|
||||
<option
|
||||
disabled
|
||||
style={{ fontSize: "13px" }}
|
||||
value=""
|
||||
>
|
||||
Select...
|
||||
</option>
|
||||
{item?.Placeholders.map(
|
||||
(data, ind) => {
|
||||
return (
|
||||
<option
|
||||
style={{ fontSize: "13px" }}
|
||||
key={ind}
|
||||
value={data?.Role}
|
||||
>
|
||||
{data?.Role}
|
||||
</option>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</select>
|
||||
) : (
|
||||
<div className="w-[60%] md:w-[70%] border-[1px] border-gray-200 rounded-sm p-[2px]">
|
||||
{item?.Placeholders[0]?.Role}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr className="bg-[#ccc] mt-2 " />
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
onClick={() => handlePublicTemplate(item)}
|
||||
className="px-4 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
|
||||
style={{
|
||||
backgroundColor: modalSubmitBtnColor
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleClose(item)}
|
||||
className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
|
||||
style={{
|
||||
backgroundColor: modalCancelBtnColor
|
||||
}}
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ModalUi>
|
||||
)}
|
||||
{isPublicProfile[item.objectId] && (
|
||||
<ModalUi
|
||||
isOpen
|
||||
title={"Public URL"}
|
||||
handleClose={() => {
|
||||
setIsPublicProfile({});
|
||||
}}
|
||||
reduceWidth={"md:min-w-[440px] md:max-w-[400px]"}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
{publicUserName ? (
|
||||
<div className="font-normal text-black">
|
||||
<p>
|
||||
Here’s your public URL. Copy or share it
|
||||
with the signer, and you will be able to
|
||||
see all your publicly set templates.
|
||||
</p>
|
||||
<div className=" flex items-center gap-5 mt-2 p-[2px] w-[75%]">
|
||||
<span className="font-bold">
|
||||
Public URL :{" "}
|
||||
</span>
|
||||
<span
|
||||
onClick={() => copytoProfileLink()}
|
||||
className="underline underline-offset-2 cursor-pointer"
|
||||
>{`https://opensign.me/${publicUserName}`}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="font-normal text-black">
|
||||
<p>
|
||||
Please add your public URL, and you will
|
||||
be able to make a public template.
|
||||
</p>
|
||||
<button
|
||||
className="px-4 py-1.5 mt-3 text-white rounded shadow-md text-center focus:outline-none "
|
||||
style={{
|
||||
backgroundColor: modalSubmitBtnColor
|
||||
}}
|
||||
onClick={() => navigate("/profile")}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ModalUi>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
)
|
||||
)}
|
||||
|
||||
@@ -4,5 +4,9 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: []
|
||||
plugins: [require("daisyui")],
|
||||
daisyui: {
|
||||
themes: ["emerald", "dark"],
|
||||
prefix: "op"
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user