BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Compare commits

base: BhawanSingh:002c8e61105d4b69551e948a15f8a6791a347916
Branches Tags
BhawanSingh:master
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:bhagwanSingh
...
compare: BhawanSingh:ac6c42e50ac59ae942098455860e340adf3d9cab
Branches Tags
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:master
BhawanSingh:bhagwanSingh

5 Commits
002c8e6110 ... ac6c42e50a

Author SHA1 Message Date
=bhagwanSingh ac6c42e50a Merge branch 'jai' 2025-08-12 16:26:30 +05:30
=bhagwanSingh 6986947cba Remove Auto Save, Change in atrributes Tags, MultiSign Change 2025-08-12 16:20:16 +05:30
JaiPandey425 b807c0c768 audit-page 2025-08-12 16:16:55 +05:30
JaiPandey425 02bfa84094 first-form-docs reset 2025-08-08 17:08:18 +05:30
JaiPandey425 cd2b8d3aff completion-screen new v1 2025-08-08 11:13:16 +05:30
16 changed files with 1250 additions and 492 deletions
Show Stats Expand all files Collapse all files

12
src/SigningOrderDiagram .tsx
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { FaCheck, FaLock, FaClock, FaEnvelope, FaTimes } from "react-icons/fa"; import { FaCheck, FaLock, FaClock, FaEnvelope, FaTimes, FaUserTimes } from "react-icons/fa";
import { IoCloseOutline } from "react-icons/io5"; import { IoCloseOutline } from "react-icons/io5";
type Signer = { type Signer = {
@ -48,8 +48,10 @@ const groupByRoutingOrder = (data: Signer[]) => {
}; };
const getInitials = (name: string) => { const getInitials = (name: string) => {
if (!name.trim()) return "";
return name return name
.split(" ") .split(" ")
.filter(n => n)
.map((n) => n[0].toUpperCase()) .map((n) => n[0].toUpperCase())
.join(""); .join("");
}; };
@ -63,6 +65,8 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
.map(Number) .map(Number)
.sort((a, b) => a - b); .sort((a, b) => a - b);
console.log("sortedOrders",sortedOrders,grouped)
const currentProcessingOrder = const currentProcessingOrder =
sortedOrders.find((order) => sortedOrders.find((order) =>
grouped[order].some((signer) => !signer.completed) grouped[order].some((signer) => !signer.completed)
@ -109,14 +113,14 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
<div key={signer.id} className="relative"> <div key={signer.id} className="relative">
<div <div
className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`} className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
title={signer.name} title={signer?.name}
> >
{getInitials(signer.name)} {(signer?.name !== '' || signer?.roleName) ? getInitials(signer?.name || signer?.roleName) : ""}
<span className="absolute bottom-[12px] right-[-12px] p-1 rounded-full bg-white shadow"> <span className="absolute bottom-[12px] right-[-12px] p-1 rounded-full bg-white shadow">
{icon} {icon}
</span> </span>
</div> </div>
<p className="mt-1 text-xs text-gray-600 text-center">{signer.name.split(" ")[0]}</p> <p className="mt-1 text-xs text-gray-600 text-center">{(signer?.name?.split(" ")[0] || signer?.roleName)}</p>
</div> </div>
); );
})} })}

200
src/components/client/SignDocument.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react"; import { useEffect, useLayoutEffect, useState } from "react";
import axios from "axios" import axios from "axios"
import { RootState } from "../../store/store"; import { RootState } from "../../store/store";
@ -26,6 +26,8 @@ import typeToIconMap from "../../helper/iconMap";
import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer"; import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
import SignCompletionScreen from "./SignCompletionScreen"; import SignCompletionScreen from "./SignCompletionScreen";
import api from "../../config/api"; import api from "../../config/api";
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
import { RiDragMoveFill } from "react-icons/ri";
@ -139,12 +141,6 @@ const fitObj = [
const SignDocument = () => { const SignDocument = () => {
useEffect(() => {
axios.get("https://concrete-gladly-mullet.ngrok-free.app/api/sign/session?recipientId=103&sessionId=iqlo2inofsqaqib8mcos4njssj").then((res) => {
console.log(res, "RESPONSE")
})
}, [])
const { recipientId } = useParams(); const { recipientId } = useParams();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -235,6 +231,8 @@ const SignDocument = () => {
}, [droppedItems]) }, [droppedItems])
console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
useEffect(() => { useEffect(() => {
if (recSignStatus === "COMPLETED") { if (recSignStatus === "COMPLETED") {
// setHideTags(true); // setHideTags(true);
@ -719,6 +717,7 @@ const SignDocument = () => {
// } // }
if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) { if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) {
const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex) const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex)
setSignConfObj({ setSignConfObj({
...signConfObj, ...signConfObj,
@ -1047,7 +1046,6 @@ const SignDocument = () => {
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => { doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
const key = `${doc.documentId}_${page.index}`; const key = `${doc.documentId}_${page.index}`;
// const tagJsonData = [...droppedItems]; // const tagJsonData = [...droppedItems];
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index) const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
return ( return (
<div <div
@ -1068,10 +1066,14 @@ const SignDocument = () => {
<div <div
tabIndex={1} tabIndex={1}
onFocus={() => setFocusElement({ ...item, focusElementIndx: index })} onFocus={() => {
setSelectedTag({ key, index })
setFocusElement({ ...item, focusElementIndx: index })
}
}
key={item.id} key={item.id}
// draggable="false" // draggable="false"
onPointerDown={(e) => handleTagMouseDown(e, key, index)} // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}
style={{ style={{
@ -1083,6 +1085,15 @@ const SignDocument = () => {
// display: `${hideTags ? 'none' : 'block'}` // display: `${hideTags ? 'none' : 'block'}`
}} }}
> >
{provideTags && !transparentTags && !hideTags &&<div
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
// className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-blue-600 rounded-tr cursor-move z-30"
title="Drag"
>
<RiDragMoveFill
className="absolute top-[-15px] left-[-15px] w-4 h-4 bg-slate-100 text-[var(--primary)] cursor-move z-30"
/>
</div>}
<> <>
{selectedTag?.key && selectedTag.key === key && selectedTag.index === index && {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
@ -1123,7 +1134,7 @@ const SignDocument = () => {
</input> */} </input> */}
{ {
item.subType === "SINGLE_LINE" && <p !item.multiLine && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
@ -1138,7 +1149,7 @@ const SignDocument = () => {
></p> ></p>
} }
{ {
item.subType === "PARAGRAPH" && <p item.multiLine && <p
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
@ -1149,7 +1160,7 @@ const SignDocument = () => {
</p> </p>
} }
{ {
item.subType === "PASSWORD" && item.mask && <p "maskType" in item && "maskCharacter" in item && item.maskType && <p
onInput={(e) => { onInput={(e) => {
const val = e.currentTarget.textContent; const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string); handleTagUpdate(index, val as string);
@ -1157,13 +1168,13 @@ const SignDocument = () => {
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") e.preventDefault(); if (e.key === "Enter") e.preventDefault();
}} }}
onFocus={() => { // onFocus={() => {
}} // }}
onBlur={(e) => { onBlur={(e) => {
let val = e.target.textContent; let val = e.target.textContent;
if (typeof item.mask?.maskType === "string" && typeof val === "string") { if (typeof item.maskType === "string" && typeof val === "string") {
val = val.replace(/ /g, ""); val = val.replace(/ /g, "");
e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter) e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
} }
}} }}
contentEditable={true} contentEditable={true}
@ -1174,6 +1185,125 @@ const SignDocument = () => {
} }
{/* TEXT FIELD - END */} {/* TEXT FIELD - END */}
{/* EMAIL FIELD - START */}
{
item.type === "EMAIL" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
const val = e.currentTarget.textContent?.trim() || "";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address");
handleTagUpdate(index, "" as string)
e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid
}
e.preventDefault()
};
}}
onBlur={(e) => {
const val = e.currentTarget.textContent?.trim() || "";
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (val && !emailRegex.test(val)) {
alert("Please enter a valid email address");
handleTagUpdate(index, "" as string)
e.currentTarget.textContent = "";
e.currentTarget.focus(); // Optional: return focus if invalid
}
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* EMAIL FIELD - END */}
{/* NAME FIELD - START */}
{
item.type === "NAME" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
};
}}
onBlur={(e) => {
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* NAME FIELD - END */}
{/* COMPANY FIELD - START */}
{
item.type === "COMPANY" &&
<div
id={item.id}
tabIndex={1}
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
>
{
<p
// name={item.id}
// style={{ height: item.dimensions.height + "px" }}
onInput={(e) => {
const val = e.currentTarget.textContent;
handleTagUpdate(index, val as string);
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault()
};
}}
onBlur={(e) => {
}}
contentEditable={true}
className="outline-none whitespace-nowrap w-full max-h-max"
></p>
}
</div>
}
{/* COMPANY FIELD - END */}
{/* CHECKBOX FIELD - START */} {/* CHECKBOX FIELD - START */}
{ {
@ -1403,12 +1533,12 @@ const SignDocument = () => {
{ {
(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) && (!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
<> <>
<div {/* <div
className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap" className="absolute left-0 z-50 bg-blue-900 text-xs text-slate-100 px-2 py-[2px] rounded-sm whitespace-nowrap"
style={{ top: -23 + "px" }} style={{ top: -23 + "px" }}
> >
<p>{focusElement.label}</p> <p>{focusElement.label}</p>
</div> </div> */}
<div <div
className="absolute left-[-10px] z-50 flex max-w-max" className="absolute left-[-10px] z-50 flex max-w-max"
style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }} style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
@ -1419,7 +1549,7 @@ const SignDocument = () => {
</div> </div>
</> </>
} }
</div> </div >
</> </>
) )
}) })
@ -1468,11 +1598,27 @@ const SignDocument = () => {
</div> </div>
<div className={`col-span-2 ${provideTags ? "" : "order-first"}`}> <div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
<DocumentPages {/* <DocumentPages
selectedDocuments={selectedDocuments} selectedDocuments={selectedDocuments}
setDropDownTogglePage={setDropDownTogglePage} setDropDownTogglePage={setDropDownTogglePage}
dropDownTogglePage={dropDownTogglePage} /> dropDownTogglePage={dropDownTogglePage} /> */}
{provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
<RightSideBar
droppedItems={droppedItems}
selectedTag={droppedItems[selectedTag.index]}
setDroppedItems={setDroppedItems}
selTagKey={selectedTag.key}
selTagIndx={selectedTag.index}
signClient={true}
/>}
</div> </div>
{/* Right Side - START */} {/* Right Side - START */}

5
src/components/home/StartNow.tsx
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { FiUpload } from 'react-icons/fi' import { FiUpload } from 'react-icons/fi'
import { uploadDocuments } from '../../store/slices/documentSlice'; import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -37,7 +37,8 @@ const StartNow = () => {
}); });
}; };
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
await dispatch(resetDocuments())
const selectedFiles = e.target.files ? Array.from(e.target.files) : []; const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
if (selectedFiles.length > 0) { if (selectedFiles.length > 0) {
setFiles((prev) => [...prev, ...selectedFiles]); setFiles((prev) => [...prev, ...selectedFiles]);

6
src/components/home/StartSection.tsx
View File

@ -84,7 +84,7 @@ const StartSection = () => {
<section className="px-4 pt-2 pb-3 w-full"> <section className="px-4 pt-2 pb-3 w-full">
<h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2> <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4 h-[12vw]">
<StartNow /> <StartNow />
@ -93,7 +93,7 @@ const StartSection = () => {
<div <div
onClick={() => handleStartSectionClick(card.link)} onClick={() => handleStartSectionClick(card.link)}
key={index} key={index}
className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`} className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
> >
{/* Icon + Text */} {/* Icon + Text */}
<div className="flex flex-col gap-3"> <div className="flex flex-col gap-3">
@ -124,7 +124,7 @@ const StartSection = () => {
</div> </div>
<section className='pt-2 pb-3'> <section className='pt-2 pb-3'>
<h2 className="mt-3 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2> <h2 className="mt-6 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
<section> <section>
<TransactionDataTable /> <TransactionDataTable />
</section> </section>

379
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -1,17 +1,29 @@
import React, { useEffect, useState } from "react"; import React, { useState, useEffect } from 'react';
import { import {
FaArrowLeft,
FaCheck, FaCheck,
FaFileAlt, FaExternalLinkAlt,
FaEye,
FaEyeSlash,
FaRedo,
FaImage,
FaUsers, FaUsers,
FaFileAlt,
FaEnvelope, FaEnvelope,
FaClock, FaCog,
FaShieldAlt,
FaBell,
FaDownload, FaDownload,
FaShare, FaShare,
FaShieldAlt, FaEdit,
FaLock, FaSave,
FaPen, FaClock,
FaCheckCircle FaLock
} from 'react-icons/fa'; } from 'react-icons/fa';
import { RootState } from '../../../store/store';
import api from '../../../config/api';
import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice"; import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice";
import { fetchDocuments } from "../../../store/slices/documentSlice"; import { fetchDocuments } from "../../../store/slices/documentSlice";
import { useDispatch, useSelector } from "react-redux"; import { useDispatch, useSelector } from "react-redux";
@ -21,7 +33,7 @@ import confetti from 'canvas-confetti'
import { IoClose } from "react-icons/io5"; import { IoClose } from "react-icons/io5";
import { IoMdClose, IoMdHome } from "react-icons/io"; import { IoMdClose, IoMdHome } from "react-icons/io";
import { Bounce, toast } from "react-toastify"; import { Bounce, toast } from "react-toastify";
import api from "../../../config/api";
type Signer = { type Signer = {
id: number; id: number;
@ -34,7 +46,7 @@ type Signer = {
// Signers List Component // Signers List Component
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
return ( return (
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100"> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
<div className="p-6"> <div className="p-6">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2"> <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
@ -46,9 +58,9 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </div>
<div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar"> <div className="space-y-3 max-h-[50vh] overflow-y-auto no-scrollbar">
{signers.map((signer) => ( {signers.map((signer) => (
<div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 rounded-lg"> <div key={signer.id} className="flex items-center gap-4 p-3 bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium"> <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")} {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
</div> </div>
@ -74,7 +86,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
))} ))}
</div> </div>
</div> </div>
</div> // </div>
); );
}; };
@ -109,10 +121,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
) || -1; ) || -1;
return ( return (
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100"> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
<div className="p-6"> <div className="p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3> <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
<div className="overflow-x-auto overflow-y-auto h-[69vh] no-scrollbar flex justify-center items-center"> <div className="overflow-x-auto overflow-y-auto h-[50vh] no-scrollbar flex justify-center items-center">
<div className="flex justify-center items-center gap-4 min-w-max"> <div className="flex justify-center items-center gap-4 min-w-max">
{/* Mail icon */} {/* Mail icon */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
@ -163,7 +175,7 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </div>
<p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate"> <p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
{signer.name.split(" ")[0]} {signer.name.split(" ")[0] || signer.firstName.split(0,1)}
</p> </p>
</div> </div>
); );
@ -182,25 +194,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</div> </div>
</div> </div>
</div> </div>
</div> // </div>
); );
}; };
const DocumentSubmissionOptions = () => {
// Main DocumentCompletionScreen Component
const DocumentCompletionScreen = () => {
const documentList = [
{ title: 'Document 1', pages: 12 },
{ title: 'Document 2', pages: 8 },
{ title: 'Document 3', pages: 5 },
{ title: 'Document 4', pages: 22 },
{ title: 'Document 5', pages: 10 },
{ title: 'Document 6', pages: 15 },
{ title: 'Document 7', pages: 7 },
{ title: 'Document 8', pages: 9 },
{ title: 'Document 9', pages: 6 },
{ title: 'Document 10', pages: 11 },
{ title: 'Document 11', pages: 4 }, // Won't be shown due to slice
];
const location = useLocation(); const location = useLocation();
const [status, setStatus] = useState(null); const [status, setStatus] = useState(null);
console.log("location.pathname", location.pathname, status) console.log("location.pathname", location.pathname, status)
@ -218,6 +215,8 @@ const DocumentCompletionScreen = () => {
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients); const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments) // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
const selectedDocuments = useSelector((state: RootState) => state.documents.documents) const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
console.log('Line 218', selectedDocuments)
const [transactionData,setTransactionData] = useState({})
useEffect(() => { useEffect(() => {
@ -277,7 +276,10 @@ const DocumentCompletionScreen = () => {
// /api/accounts/{accountId}/transactions/{trxId} // /api/accounts/{accountId}/transactions/{trxId}
try { try {
const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`); const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
setStatus(res?.data?.status); if (res?.data) {
setStatus(res?.data?.status);
setTransactionData(res?.data)
}
} catch (error) { } catch (error) {
console.error("Failed to fetch transaction:", error); console.error("Failed to fetch transaction:", error);
} }
@ -292,140 +294,251 @@ const DocumentCompletionScreen = () => {
useEffect(() => { useEffect(() => {
if (status === "SENT") { if (status === "SENT") {
const currentPath = window.location.pathname; const currentPath = window.location.pathname;
const handlePopState = (event) => { const handlePopState = (event) => {
// Show warning // Show warning
alert("Back navigation is blocked on this screen."); alert("Back navigation is blocked on this screen.");
// Push the current URL back to prevent navigating away // Push the current URL back to prevent navigating away
window.history.pushState(null, "", currentPath); window.history.pushState(null, "", currentPath);
}; };
// Push extra states to build history buffer // Push extra states to build history buffer
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
window.history.pushState(null, "", currentPath); window.history.pushState(null, "", currentPath);
}
// Add popstate listener
window.addEventListener("popstate", handlePopState);
// Cleanup on unmount
return () => {
window.removeEventListener("popstate", handlePopState);
};
} }
// Add popstate listener
window.addEventListener("popstate", handlePopState);
// Cleanup on unmount
return () => {
window.removeEventListener("popstate", handlePopState);
};
}
}, [status]); }, [status]);
// useEffect(() => { // useEffect(() => {
// if (status === 'SENT') { // if (status === 'SENT') {
// // Step 1: Push a dummy state to trap the user // // Step 1: Push a dummy state to trap the user
// window.history.pushState(null, '', window.location.href); // window.history.pushState(null, '', window.location.href);
// // Step 2: Intercept back button // // Step 2: Intercept back button
// const handlePopState = (event) => { // const handlePopState = (event) => {
// // Push the same dummy state again to block back // // Push the same dummy state again to block back
// window.history.pushState(null, '', window.location.href); // window.history.pushState(null, '', window.location.href);
// }; // };
// window.addEventListener('popstate', handlePopState); // window.addEventListener('popstate', handlePopState);
// return () => { // return () => {
// window.removeEventListener('popstate', handlePopState); // window.removeEventListener('popstate', handlePopState);
// }; // };
// } // }
// }, [status]); // }, [status]);
const [selectedOption, setSelectedOption] = useState('success');
const [isVisible, setIsVisible] = useState(false);
const [previewData, setPreviewData] = useState({
documentName: "Contract Agreement.pdf",
submissionCount: 1,
signerName: "Sumit Kumar",
signerEmail: "sumit.kumar@hicglobalsolutions.com",
submissionTime: new Date().toLocaleString()
});
useEffect(() => {
setIsVisible(true);
}, []);
const options = [
{
id: 'success',
icon: FaCheck,
title: 'Success screen',
description: 'Display confirmation message after successful document submission',
color: 'bg-green-50 border-green-200 hover:bg-green-100',
iconColor: 'text-green-600',
isPremium: false
},
{
id: 'redirect',
icon: FaExternalLinkAlt,
title: 'Signing Flow',
description: 'Navigate user to view their transaction details',
color: 'bg-blue-50 border-blue-200 hover:bg-blue-100',
iconColor: 'text-blue-600',
isPremium: true
},
{
id: 'public',
icon: FaEye,
title: 'Signature status',
description: 'Show transaction status on public dashboard',
color: 'bg-purple-50 border-purple-200 hover:bg-purple-100',
iconColor: 'text-purple-600',
isPremium: true
},
];
const getPreviewContent = () => {
switch (selectedOption) {
case 'success':
return (
<div className="text-center space-y-6">
<div className="w-24 h-24 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-6 mx-auto shadow-lg animate-bounce">
<FaCheck className="text-white text-4xl" />
</div>
<div>
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
{selectedDocuments?.map((docs) => (
<p className="text-gray-600">Your document "{docs.name}" has been sent for signature.</p>
) )}
</div>
<div className="bg-gray-50 rounded-lg p-4 space-y-2">
<div className="flex justify-between text-sm">
<span className="text-gray-500">createdBy:</span>
<span className="font-medium">{transactionData?.createdBy?.name}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-500">Email:</span>
<span className="font-medium">{transactionData?.createdBy?.email}</span>
</div>
<div className="flex justify-between text-sm">
<span className="text-gray-500">createdAt:</span>
<span className="font-medium">{transactionData.createdAt}</span>
</div>
</div>
</div>
);
case 'redirect':
return (
<>
<SigningOrderDiagram signers={selectedRecipients} />
</>
);
case 'public':
return (
<>
<SignersList signers={selectedRecipients} />
</>
);
default:
return null;
}
};
return ( return (
<> <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6">
<div className="min-h-screen bg-[var(--mainViewBg)]"> <div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
{/* Top Banner */}
<div className='fixed top-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
<div className='flex items-center gap-2'>
<Link to={"/"}>
<IoMdHome
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
/>
</Link>
<p className="text-base font-normal text-gray-700 border-l pl-4">🎉 Awesome! The document’s been sent for signature. 🎉</p>
</div>
<div {/* Header */}
id="add-tags-btn-step-one" <div className="flex items-center space-x-4 mb-5">
className='flex items-center gap-3'> <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
<IoMdHome
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]"> className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
{/* <FaPen className=" text-white text-md" /> */} />
<span className="tracking-wide text-white">View Transaction</span> </Link>
</Link> <div className="h-8 w-px bg-gray-300"></div>
<h1 className="text-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
{/* <button
onClick={() => handleNextClick(false)}
className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
>
{signType === SignTypeEnum.selfSign ? "Sign" : "Next"}
</button> */}
</div>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
{/* Left Panel - Configuration */}
<div className="space-y-6 ">
{/* Action Selection */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] ">
<div className="p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4">
Choose an action after a signer completes the document.
</h3>
<div className="space-y-3">
{options.map((option) => {
const Icon = option.icon;
const isSelected = selectedOption === option.id;
{(selectedRecipients.length > 0 && selectedDocuments.length > 0) ? return (
<div className="p-3 mt-[55px]"> <div
<div className="max-w-[97vw] mx-auto"> key={option.id}
{/* Header */} onClick={() => setSelectedOption(option.id)}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2"> className={`
{/* Left Section - Document Details */} relative cursor-pointer p-4 rounded-xl border-2 transition-all duration-200 group
<div className="lg:col-span-6 space-y-2"> ${isSelected
{/* Document Preview Card */} ? 'border-[var(--primary)] bg-blue-50 shadow-md scale-[1.02]'
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto"> : option.color + ' border-2'
<div className="p-3 "> }
{selectedDocuments?.map((item, index) => ( hover:shadow-md hover:scale-[1.01] transform
<div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3"> `}
<div className="flex items-center gap-4"> >
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center"> <div className="flex items-start space-x-4">
{/* <FaFileAlt className="text-blue-600 text-xl" /> */} <div className={`
<img src={item.pages[0].src} alt="document" className="h-10 w-10" /> w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200
</div> ${isSelected
<div> ? 'bg-[var(--primary)] text-white shadow-lg'
<h3 className="text-md font-semibold text-gray-800"> : 'bg-white ' + option.iconColor + ' group-hover:scale-110'
Name : {item.name ?? '--'} }
</h3> `}>
<div className="text-gray-600 text-sm"> <Icon className="text-lg" />
Status : {item.status ?? '--'} </div>
</div> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-2">
<h4 className={`font-semibold transition-colors duration-200 ${isSelected ? 'text-[var(--primary)]' : 'text-gray-800'
}`}>
{option.title}
</h4>
{option.isPremium && (
<span className="text-purple-500 text-sm">★</span>
)}
</div> </div>
<p className="text-sm text-gray-600 mt-1">
{option.description}
</p>
</div> </div>
</div> </div>
))}
</div>
</div>
<div><SignersList signers={selectedRecipients} /></div> {/* Selection indicator */}
{isSelected && (
<div className="absolute top-4 right-4">
<div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center">
<FaCheck className="text-white text-xs" />
</div>
</div>
)}
</div>
);
})}
</div> </div>
</div>
</div>
{/* Right Section - Signer Components */} {/* Custom Image Section */}
<div className="lg:col-span-6 space-y-1.5"> </div>
{/* Signing Order Diagram */}
<SigningOrderDiagram signers={selectedRecipients} />
{/* Signers List */} {/* Right Panel - Preview */}
<div className="space-y-6">
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-6">
<div className="bg-gradient-to-r from-gray-50 to-blue-50 px-6 py-2 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-800">Live Preview</h3>
<p className="text-sm text-gray-500">See how your users will experience the completion</p>
</div>
<div className="p-3 min-h-[70vh] flex justify-center">
<div className="w-full transition-all duration-500 transform">
{getPreviewContent()}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
: <Loader />} </div>
</div> </div>
</> </div>
); );
}; };
export default DocumentCompletionScreen; export default DocumentSubmissionOptions;

25
src/components/process/processStepOne/RecipientAddCard.tsx
View File

@ -22,11 +22,11 @@ interface ContactType {
export interface ContactTypeObj { export interface ContactTypeObj {
type: string; type: string;
contacts: ContactType[]; contacts: ContactType[];
setEditRecipientCurrentEmail : any setEditRecipientCurrentEmail: any
} }
const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef , setEditRecipientCurrentEmail }) => { const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => {
const [activeAccountId, setActiveAccountId] = useState<string | null>( const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null') JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
); );
@ -113,7 +113,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
hostName: editRecipient.hostName || "", hostName: editRecipient.hostName || "",
hostEmail: editRecipient.hostEmail || "", hostEmail: editRecipient.hostEmail || "",
roleName: editRecipient.roleName || "", roleName: editRecipient.roleName || "",
type: editRecipient.type || recipientType.SIGNER, type: editRecipient.type,
allowSenderToEdit: editRecipient.allowSenderToEdit ?? true, allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
allowSenderToDelete: editRecipient.allowSenderToDelete ?? true, allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''), uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
@ -210,11 +210,22 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
submitForm(); submitForm();
function submitForm() { function submitForm() {
if (editCase === 'Edit') { let updatedRecipient = { ...recipient };
dispatch(updateRecipient(recipient));
// Clear hostName and hostEmail if type is SIGNER or CC
if (
updatedRecipient.type === recipientType.SIGNER ||
updatedRecipient.type === recipientType.CC
) {
updatedRecipient.hostName = "";
updatedRecipient.hostEmail = "";
}
if (editCase === "Edit") {
dispatch(updateRecipient(updatedRecipient));
} else { } else {
dispatch(addRecipient({ dispatch(addRecipient({
...recipient, ...updatedRecipient,
uuid: uuidv4(), uuid: uuidv4(),
newOne: true, newOne: true,
})); }));
@ -580,7 +591,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
type="radio" type="radio"
name="recipient-type" name="recipient-type"
value={option.value} value={option.value}
defaultChecked={option.value === recipientType.SIGNER} checked={recipient.type === option.value}
onClick={(e) => setRecipients({ ...recipient, type: e.target.value })} onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
className="accent-[var(--primary)] cursor-pointer" className="accent-[var(--primary)] cursor-pointer"
/> />

2
src/components/process/processStepOne/RecipientCards.tsx
View File

@ -141,7 +141,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
{recipients.map((recipient, idx) => ( {recipients.map((recipient, idx) => (
<div <div
key={recipient.email + idx} key={recipient.email + idx}
className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-gray-200 opacity-40" : ""}`} className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-neutral-100 opacity-40 " : ""}`}
> >
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
{/* {signingOrder && ( */} {/* {signingOrder && ( */}

408
src/components/process/processStepTwo/DocumentContainer.tsx
View File

@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
import api from '../../../config/api'; import api from '../../../config/api';
import RightSideBar from './rightSideBar/RightSideBar'; import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar';
import { DroppedItem, TagsTypes } from '../../../utlity/types'; import { DroppedItem, TagsTypes } from '../../../utlity/types';
import { useNavigate, useParams } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
@ -89,13 +89,118 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
for (const tag of res.data) { for (const tag of res.data) {
const key = `${tag.documentId}_${tag.pageIndex}`; const key = `${tag.documentId}_${tag.pageIndex}`;
if (recTags[key]) { if (recTags[key]) {
recTags[key].push({ ...tag, update: false }); recTags[key].push(tag);
} else { } else {
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array recTags[key] = [tag]; // Initialize with an array
} }
} }
} }
// console.log(recTags, "Line 83");
let updatedTags = { ...recTags }
let tagsData = []
for (const dropPageIds of Object.keys(updatedTags)) {
for (const dropTag of updatedTags[dropPageIds]) {
let mask = null
// console.log(dropTag, "line 132")
// if (dropTag.subType?.toLowerCase() === "password") {
// console.log(dropTag)
mask = {
"type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
}
// }
// console.log(dropTag, "line 204")
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
const updatedTagData = {
"id": "id" in dropTag ? dropTag.id : null,
"label": dropTag.label,
"dimensions": dropTag.dimensions,
"type": dropTag.type.toUpperCase(),
// "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
"minLength": "minLength" in dropTag ? dropTag.minLength : 0,
"maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
"error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
"regex": "regex" in dropTag ? dropTag.regex : []
// }
,
"documentId": dropTag.documentId,
"options": ("options" in dropTag) ? dropTag.options : [],
"pageIndex": dropTag.pageIndex,
"recipientId": dropTag.recipientId,
"styles": "styles" in dropTag ? dropTag.styles : {
"font": "",
"italic": false,
"bold": false,
"underline": false,
"color": "black",
"textSize": 0
},
"required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
// "required": "required" in dropTag ? dropTag.required : ,
"update": "update" in dropTag ? dropTag.update : false,
"readOnly": false,
}
// if ("format" in dropTag) {
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
// updatedTagData.dateFormat = dropTag.format;
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
// }
if("format" in dropTag && dropTag.format) {
updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
}
if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency
}
if (dropTag.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph"
if(dropTag.multiLine) {
updatedTagData.subtype = TEXT.PARAGRAPH
} else {
updatedTagData.subtype = TEXT.SINGLE_LINE
}
if ("maskType" in dropTag) {
updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type
}
}
// if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
if (!updatedTagData.id) delete updatedTagData.id;
if (!isDeleted) {
// sendTags.mod.push(updatedTagData);
tagsData.push(updatedTagData)
}
}
}
setDroppedItems(recTags) setDroppedItems(recTags)
// Handle your response here // Handle your response here
} catch (err) { } catch (err) {
@ -125,17 +230,14 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const groupByRecipientId = (tagsArray: any[]) => { const groupByRecipientId = (tagsArray: any[]) => {
const tagsData: Record<number, any[]> = {}; const tagsData: Record<number, any[]> = {};
for (const tag of tagsArray) { for (const tag of tagsArray) {
const recipientId = tag.recipientId; const recipientId = tag.recipientId;
if (!tagsData[recipientId]) { if (!tagsData[recipientId]) {
tagsData[recipientId] = []; tagsData[recipientId] = [];
} }
tagsData[recipientId].push(tag); tagsData[recipientId].push(tag);
} }
return tagsData; return tagsData;
}; };
@ -161,6 +263,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
delete updateTags[updateTags.length - 1].update delete updateTags[updateTags.length - 1].update
} }
} }
updatedData[recipientId] = updateTags updatedData[recipientId] = updateTags
} }
@ -173,29 +276,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
}); });
try { try {
const response = await Promise.all(requests); const responses = await Promise.all(requests);
let recTags = droppedItems; const droppedItemsUpdateFalse = Object.fromEntries(
Object.entries(droppedItems).map(([recipientId, tags]) => {
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
})
)
for (const res of response) { console.log(droppedItemsUpdateFalse, "Line 182")
for (const tag of res.data) {
const key = `${tag.documentId}_${tag.pageIndex}`;
if (recTags[key]) {
recTags[key].push({ ...tag, update: false });
} else {
recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
}
}
}
setSelectedTag(null);
// setTimeout(async () => {
// await fetchTags()
// setSelectedTag(null);
// }, 1000)
// console.log(droppedItemsUpdateFalse, "Line 182")
// setDroppedItems(droppedItemsUpdateFalse); // setDroppedItems(droppedItemsUpdateFalse);
} catch (error) { } catch (error) {
console.error("Error submitting recipient tags:", error); console.error("Error submitting recipient tags:", error);
@ -204,118 +294,125 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const handleTransactionProcess = async (save: boolean = false) => { const handleTransactionProcess = async (save: boolean = false) => {
console.log(droppedItems, "called Line 189");
if (Object.keys(droppedItems).length === 0) return; if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return; if (!save && isSend === null) return;
!save && dispatch(showLoader("Loading ...")) // !save && dispatch(showLoader("Loading ..."))
let updatedTags = { ...droppedItems } // let updatedTags = { ...droppedItems }
// const sendTags = { // const sendTags = {
// "mod": [], // "mod": [],
// "remove": [] // "remove": []
// } // }
let tagsData = [] // let tagsData = []
// const modified = [] // const modified = []
// const remove = [] // const remove = []
// console.log(updatedTags, "updatedTags"); // console.log(updatedTags, "updatedTags");
for (const dropPageIds of Object.keys(updatedTags)) { // for (const dropPageIds of Object.keys(updatedTags)) {
for (const dropTag of updatedTags[dropPageIds]) { // for (const dropTag of updatedTags[dropPageIds]) {
let mask = null // let mask = null
// console.log(dropTag, "line 132") // // console.log(dropTag, "line 132")
// if (dropTag.subType?.toLowerCase() === "password") { // // if (dropTag.subType?.toLowerCase() === "password") {
// console.log(dropTag) // // console.log(dropTag)
mask = { // mask = {
"type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null, // "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
"character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null // "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
} // }
// } // // }
// console.log(dropTag, "line 204") // // console.log(dropTag, "line 204")
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false // const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
const updatedTagData = { // const updatedTagData = {
"id": "id" in dropTag ? dropTag.id : null, // "id": "id" in dropTag ? dropTag.id : null,
"label": dropTag.label, // "label": dropTag.label,
"dimensions": dropTag.dimensions, // "dimensions": dropTag.dimensions,
"type": dropTag.type.toUpperCase(), // "type": dropTag.type.toUpperCase(),
// "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null), // // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
"minLength": "minLength" in dropTag ? dropTag.minLength : 0, // "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
"maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0, // "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
"error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error", // "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
"regex": "regex" in dropTag ? dropTag.regex : [] // "regex": "regex" in dropTag ? dropTag.regex : []
// } // // }
, // ,
"documentId": dropTag.documentId, // "documentId": dropTag.documentId,
"options": ("options" in dropTag) ? dropTag.options : [], // "options": ("options" in dropTag) ? dropTag.options : [],
"pageIndex": dropTag.pageIndex, // "pageIndex": dropTag.pageIndex,
"recipientId": dropTag.recipientId, // "recipientId": dropTag.recipientId,
"styles": "styles" in dropTag ? dropTag.styles : { // "styles": "styles" in dropTag ? dropTag.styles : {
"font": "", // "font": "",
"italic": false, // "italic": false,
"bold": false, // "bold": false,
"underline": false, // "underline": false,
"color": "black", // "color": "black",
"textSize": 0 // "textSize": 0
}, // },
"required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true, // "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
// "required": "required" in dropTag ? dropTag.required : , // // "required": "required" in dropTag ? dropTag.required : ,
"update": "update" in dropTag ? dropTag.update : false, // "update": "update" in dropTag ? dropTag.update : false,
"readOnly": false, // "readOnly": false,
} // }
if ("format" in dropTag) { // if ("format" in dropTag) {
updatedTagData.format = `${dropTag.subType}`.toUpperCase(); // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
updatedTagData.dateFormat = dropTag.format; // updatedTagData.dateFormat = dropTag.format;
updatedTagData.currentTimeStamp = dropTag.currentTimeStamp // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
} // }
if (`${dropTag.type}`.toLowerCase() === "number") { // if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.decimalPlace = dropTag.decimalPlace // updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.isCurrency = dropTag.isCurrency // updatedTagData.isCurrency = dropTag.isCurrency
} // }
if (updatedTagData.type === "TEXT") { // if (updatedTagData.type === "TEXT") {
updatedTagData.multiLine = dropTag.subType === "paragraph" // updatedTagData.multiLine = dropTag.subType === "paragraph"
if (dropTag.subType === "password") { // if (dropTag.subType === "password") {
updatedTagData.maskCharacter = mask.character // updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type // updatedTagData.maskType = mask.type
} // }
} // }
// if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required; // // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" // if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT" // if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options; // if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
if (!updatedTagData.id) delete updatedTagData.id; // if (!updatedTagData.id) delete updatedTagData.id;
if (!isDeleted) { // if (!isDeleted) {
// sendTags.mod.push(updatedTagData); // // sendTags.mod.push(updatedTagData);
tagsData.push(updatedTagData) // tagsData.push(updatedTagData)
} // }
} // }
// }
let updatedTags : any = [];
for (const dropPagesId of Object.keys(droppedItems)) {
console.log("Dropped Item:", droppedItems[dropPagesId]);
updatedTags.push(...droppedItems[dropPagesId]);
} }
tagsData = groupByRecipientId(tagsData);
console.log(updatedTags, "updatedTags")
console.log("Hefre is the line 299", tagsData); let tagsData = groupByRecipientId(updatedTags);
await sendTagsToRecipients(tagsData, accountId, transactionId); await sendTagsToRecipients(tagsData, accountId, transactionId);
// if (save) { // if (save) {
// setSelectedTag(null); // if (selectedRecipients.length === 0) return;
// await fetchTags(); // fetchTags();
// setSelectedTag(null)
// } // }
// SENDING Transaction - START // SENDING Transaction - START
@ -339,7 +436,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
const interval = setInterval(async () => { const interval = setInterval(async () => {
// debugger // debugger
setTransactionSaving(true) setTransactionSaving(true)
handleTransactionProcess(true); // handleTransactionProcess(true);
}, 8000) }, 8000)
// }, 8000) // }, 8000)
return () => clearInterval(interval); return () => clearInterval(interval);
@ -382,11 +479,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
let prepData = { let prepData = {
properties: data.properties, ...data.properties,
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />, icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
type: dragElemData.label, type: dragElemData.label,
label: dragElemData.label, label: dragElemData.label,
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '', // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
dimensions: { dimensions: {
left: x, left: x,
top: y, top: y,
@ -952,85 +1049,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
return () => clearTimeout(timeoutId); return () => clearTimeout(timeoutId);
}, [droppedItems]); // Re-run when droppedItems changes }, [droppedItems]); // Re-run when droppedItems changes
const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
if (!selectedTag) return;
const { key, index } = selectedTag;
const currentItem = droppedItems[key]?.[index];
if (!currentItem) return;
let newLeft = currentItem.dimensions.left;
let newTop = currentItem.dimensions.top;
switch (direction) {
case 'up':
newTop = Math.max(0, newTop - stepSize);
break;
case 'down':
newTop = newTop + stepSize;
break;
case 'left':
newLeft = Math.max(0, newLeft - stepSize);
break;
case 'right':
newLeft = newLeft + stepSize;
break;
}
setDroppedItems({
...droppedItems,
[key]: Array.isArray(droppedItems[key])
? droppedItems[key].map((item, i) =>
i === index
? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
: item
)
: [],
});
};
const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
handleDirectionalMove(direction, 5); // Use default stepSize of 5
};
// Add this new handler function to your parent component
const handleDirectPositionChange = (newLeft: number, newTop: number) => {
console.log("handleDirectPositionChange", newLeft, newTop)
if (!selectedTag) return;
const { key, index } = selectedTag;
const currentItem = droppedItems[key]?.[index];
if (!currentItem) return;
// Ensure values are not negative
const clampedLeft = Math.max(0, newLeft);
const clampedTop = Math.max(0, newTop);
setDroppedItems({
...droppedItems,
[key]: Array.isArray(droppedItems[key])
? droppedItems[key].map((item, i) =>
i === index
? {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
: item
)
: [],
});
};
console.log(droppedItems, "Line 1022")
return ( return (
<> <>
{/* Center Doc Container - START */} {/* Center Doc Container - START */}
@ -1162,7 +1180,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
/> />
{/* Side details of documents Pages and document Name - START */} {/* Side details of documents Pages and document Name - START */}
<p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'> <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
page {indx + 1} of {doc.pages && doc.pages.length} page {indx + 1} of {doc.pages && doc.pages.length}
@ -1188,17 +1205,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
</div > </div >
{ {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
console.log(selectedTag, droppedItems, "Line 1175") droppedItems={droppedItems}
} selectedTag={droppedItems[selectedTag.key][selectedTag.index]}
setDroppedItems={setDroppedItems}
selTagKey={selectedTag.key}
selTagIndx={selectedTag.index}
signClient={false}
/>
{selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{ }
onMove: directionalControlsHandler,
onPositionChange: handleDirectPositionChange,
disabled: false,
stepSize: 5,
className: ''
}} />}
{/* Center Doc Container - END */} {/* Center Doc Container - END */}
</> </>
) )

1
src/components/process/processStepTwo/FieldList.tsx
View File

@ -99,6 +99,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
.map((type) => prioritized.find((tag: any) => tag.type === type)) .map((type) => prioritized.find((tag: any) => tag.type === type))
.filter(Boolean); // remove undefined in case not found .filter(Boolean); // remove undefined in case not found
setTagsData([...prioritizedSorted, ...others]); setTagsData([...prioritizedSorted, ...others]);
}) })
.catch((err) => { .catch((err) => {

2
src/components/process/processStepTwo/NavTwo.tsx
View File

@ -145,7 +145,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
transition: Bounce, transition: Bounce,
}); });
} }
}, 0) }, 1000)
} }
const handleSetIsFields = (setTo: boolean) => { const handleSetIsFields = (setTo: boolean) => {

17
src/components/process/processStepTwo/rightSideBar/DirectionalControls.tsx
View File

@ -67,7 +67,10 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
}; };
const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => { const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
if (e.key === 'Enter') handlePositionInputBlur(type); if (e.key === 'Enter') {
e.preventDefault();
handlePositionInputBlur(type)
};
}; };
useEffect(() => { useEffect(() => {
@ -106,13 +109,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
return ( return (
<div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}> <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
{/* Top */} {/* Top */}
<button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up"> <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
<FaArrowUp /> <FaArrowUp />
</button> </button>
{/* Middle: Left / Inputs / Right */} {/* Middle: Left / Inputs / Right */}
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left"> <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
<FaArrowLeft /> <FaArrowLeft />
</button> </button>
@ -121,7 +124,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={leftValue} value={leftValue}
onChange={(e) => handlePositionInputChange('left', e.target.value)} onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
onBlur={() => handlePositionInputBlur('left')} onBlur={() => handlePositionInputBlur('left')}
onKeyPress={(e) => handleKeyPress(e, 'left')} onKeyPress={(e) => handleKeyPress(e, 'left')}
disabled={disabled} disabled={disabled}
@ -131,7 +134,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={topValue} value={topValue}
onChange={(e) => handlePositionInputChange('top', e.target.value)} onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
onBlur={() => handlePositionInputBlur('top')} onBlur={() => handlePositionInputBlur('top')}
onKeyPress={(e) => handleKeyPress(e, 'top')} onKeyPress={(e) => handleKeyPress(e, 'top')}
disabled={disabled} disabled={disabled}
@ -140,13 +143,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
/> />
</div> </div>
<button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right"> <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
<FaArrowRight /> <FaArrowRight />
</button> </button>
</div> </div>
{/* Bottom */} {/* Bottom */}
<button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down"> <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
<FaArrowDown /> <FaArrowDown />
</button> </button>
{/* Middle Row: Left - Center (Inputs) - Right */} {/* Middle Row: Left - Center (Inputs) - Right */}

299
src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx
View File

@ -27,16 +27,18 @@ import DirectionalControls from "./DirectionalControls";
// } // }
export interface DroppedItemProps { export interface DroppedItemProps {
droppedItems: DroppedItem[]
selectedTag: DroppedItem selectedTag: DroppedItem
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
selTagKey: string, selTagKey: string,
selTagIndx: number, selTagIndx: number,
DirectionalControlsProps: { signClient: boolean,
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; // DirectionalControlsProps: {
disabled?: boolean; // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
stepSize?: number; // disabled?: boolean;
className?: string; // stepSize?: number;
} // className?: string;
// }
} }
export enum TEXT { export enum TEXT {
@ -103,14 +105,12 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => { const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap]; const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
console.log("selectedTag", selectedTag, selectedType)
const [styles, setStyles] = useState(defaultStyles); const [styles, setStyles] = useState(defaultStyles);
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null); const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
@ -118,71 +118,64 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => { const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
console.log("changeTo", changeTo, "changeWith", changeWith) console.log("changeTo", changeTo, "changeWith", changeWith)
if (changeTo === '' || changeWith === '') return if (changeTo === '' || changeWith === '') return
// if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) { if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
// // let change: string = changeWith;
// // if (change === "DATE TIME") {
// // change = "DATE_TIME"
// // }
// setDroppedItems((prev) => {
// console.log("Temporal30", prev);
// return {
// ...prev,
// [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
// ? prev[selTagKey].map((item, i) =>
// i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
// )
// : [], // Fallback in case it's undefined or not an array
// };
// });
// } else if (!signClient) {
setDroppedItems((prev) => (
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { {
console.log("Second check") ...prev,
console.log("Line 161") [selTagKey]: Array.isArray(prev[selTagKey])
setDroppedItems((prev) => ( ? prev[selTagKey].map((item, i) =>
{ i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
...prev, )
[selTagKey]: Array.isArray(prev[selTagKey]) : [],
? prev[selTagKey].map((item, i) => }
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item ));
) } else {
: [], setDroppedItems((prev) => {
} const updated = [...prev];
)); updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
} return updated;
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) { })
console.log("Third check") }
} else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace; let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
const isCurrency = changeWith === NUMBER.CURRENCY; const isCurrency = changeWith === NUMBER.CURRENCY;
// const currencyType = null // const currencyType = null
setDroppedItems((prev) => ( if (!signClient) {
{ setDroppedItems((prev) => (
...prev, {
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array ...prev,
? prev[selTagKey].map((item, i) => [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item ? prev[selTagKey].map((item, i) =>
) i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
: [], )
}// Provide a fallback in case it's undefined or not an array : [],
)); }// Provide a fallback in case it's undefined or not an array
));
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
return updated;
})
}
}
}
else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) { else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
console.log("Fourth Check")
let val = timeFormats[0].format; let val = timeFormats[0].format;
console.log(is24Hrs, "is24Hrs Line 176")
if (is24Hrs === null) { if (is24Hrs === null) {
val = timeFormats[0].format val = timeFormats[0].format
} else if(!is24Hrs) { } else if (!is24Hrs) {
val = timeFormats[1].format val = timeFormats[1].format
} else { } else {
val = timeFormats[0].format val = timeFormats[0].format
@ -193,41 +186,57 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
// changeWith = changeWith + " " + val; // changeWith = changeWith + " " + val;
// } // }
setDroppedItems((prev) => {
const updatedArray = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => {
if (i === selTagIndx) {
const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
console.log('Updating item at index', i, 'with:', updatedItem);
return updatedItem;
}
return item;
})
: [];
return { if (!signClient) {
...prev, setDroppedItems((prev) => {
[selTagKey]: updatedArray, const updatedArray = Array.isArray(prev[selTagKey])
}; ? prev[selTagKey].map((item, i) => {
}); if (i === selTagIndx) {
} const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
console.log('Updating item at index', i, 'with:', updatedItem);
return updatedItem;
}
return item;
})
: [];
return {
...prev,
[selTagKey]: updatedArray,
};
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
}
else { else {
setDroppedItems((prev) => {
const updatedItems = Array.isArray(prev[selTagKey]) if (!signClient) {
? prev[selTagKey].map((item, i) => setDroppedItems((prev) => {
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
)
: [];
console.log('Updated items:', updatedItems); const updatedItems = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) =>
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
)
: [];
return { return {
...prev, ...prev,
[selTagKey]: updatedItems, [selTagKey]: updatedItems,
}; };
}); });
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
return updated;
})
}
} }
setDropDownToggle(null) setDropDownToggle(null)
@ -319,6 +328,110 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
handlePropertyChange("styles", updatedStyles); handlePropertyChange("styles", updatedStyles);
}; };
const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
if (!selectedTag) return;
const currentItem = droppedItems[selTagKey]?.[selTagIndx];
if (!currentItem) return;
let newLeft = currentItem.dimensions.left;
let newTop = currentItem.dimensions.top;
switch (direction) {
case 'up':
newTop = Math.max(0, newTop - stepSize);
break;
case 'down':
newTop = newTop + stepSize;
break;
case 'left':
newLeft = Math.max(0, newLeft - stepSize);
break;
case 'right':
newLeft = newLeft + stepSize;
break;
}
if (!signClient) {
setDroppedItems({
...droppedItems,
[selTagKey]: Array.isArray(droppedItems[selTagKey])
? droppedItems[selTagKey].map((item, i) =>
i === selTagIndx
? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
: item
)
: [],
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
return updated;
})
}
};
const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
handleDirectionalMove(direction, 5); // Use default stepSize of 5
};
const handleDirectPositionChange = (newLeft: number, newTop: number) => {
if (!selectedTag) return;
const currentItem = droppedItems[selTagKey]?.[selTagIndx];
if (!currentItem) return;
// Ensure values are not negative
const clampedLeft = Math.max(0, newLeft);
const clampedTop = Math.max(0, newTop);
if (!signClient) {
setDroppedItems({
...droppedItems,
[selTagKey]: Array.isArray(droppedItems[selTagKey])
? droppedItems[selTagKey].map((item, i) =>
i === selTagIndx
? {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
: item
)
: [],
});
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = {
...item,
dimensions: {
...item.dimensions,
left: clampedLeft,
top: clampedTop
},
update: true
}
return updated
})
}
};
const DirectionalControlsProps = {
onMove: directionalControlsHandler,
onPositionChange: handleDirectPositionChange,
disabled: false,
stepSize: 5,
className: ''
}
return ( return (
<> <>

28
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -55,7 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getAllSignatures, getAllSignatures,
editingSignature editingSignature
}) => { }) => {
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE'); const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
const [fullName, setFullName] = useState(''); const [fullName, setFullName] = useState('');
const [initials, setInitials] = useState(''); const [initials, setInitials] = useState('');
const [isSubmitting, setIsSubmitting] = useState<boolean>(false); const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@ -107,7 +107,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
// Navigation items // Navigation items
const navigationItems = [ const navigationItems = [
{ id: 'TYPE', label: 'TYPE', icon: <GrCheckboxSelected className="w-4 h-4" /> }, { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> }, { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> }, { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> }, // { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
@ -118,7 +118,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
if (editingSignature) { if (editingSignature) {
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`); setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`); setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
setActiveTab(editingSignature.signatureType as 'TYPE' | 'DRAW' | 'UPLOAD'); setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
// Set font for SELECT tab // Set font for SELECT tab
const fontOption = signatureOptions.find(option => option.style === editingSignature.font); const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
@ -193,10 +193,12 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const handleSubmit = async () => { const handleSubmit = async () => {
setIsSubmitting(true); setIsSubmitting(true);
if (!signatures.fullSignature || !signatures.initials) { if (activeTab === 'DRAW' || activeTab === 'UPLOAD') {
alert('Please provide both signature and initials'); if (!signatures.fullSignature || !signatures.initials) {
setIsSubmitting(false); alert('Please provide both signature and initials');
return; setIsSubmitting(false);
return;
}
} }
try { try {
@ -207,7 +209,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
firstName: fullName.split(' ')[0] || user.firstName, firstName: fullName.split(' ')[0] || user.firstName,
lastName: fullName.split(' ')[1] || user.lastName, lastName: fullName.split(' ')[1] || user.lastName,
font: selectedSignature.style, font: selectedSignature.style,
default:checked default: checked
}; };
let res; let res;
@ -273,7 +275,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const renderContent = () => { const renderContent = () => {
switch (activeTab) { switch (activeTab) {
case 'TYPE': case 'SELECT':
return ( return (
<div className="h-full flex flex-col "> <div className="h-full flex flex-col ">
<div className="mb-6"> <div className="mb-6">
@ -481,7 +483,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
{navigationItems.map((item) => ( {navigationItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as 'TYPE' | 'DRAW' | 'UPLOAD')} onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
? 'bg-blue-50 text-blue-700 border border-blue-200' ? 'bg-blue-50 text-blue-700 border border-blue-200'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
@ -534,9 +536,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div> </div>
<p className="text-sm text-gray-700 opacity-80 ms-1"> <p className="text-sm text-gray-700 opacity-80 ms-1">
{checked
? 'Signature will be used by default.' Signature will be used by default.
: 'Signature will not be used by default.'}
</p> </p>
</label> </label>

254
src/components/transactions/AuditModal.tsx Normal file
View File

@ -0,0 +1,254 @@
import React, { useState } from "react";
import {
FiX,
FiCheckCircle,
FiXCircle,
FiClock,
FiUser,
FiCalendar,
FiFileText,
FiAlertTriangle,
FiTruck,
FiUserCheck,
FiUserX,
FiPackage,
FiMapPin,
FiEye,
FiRotateCcw
} from "react-icons/fi";
interface AuditModalProps {
closeModal: () => void;
}
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
const statusHistory = [
{
id: 1,
title: "The Accrual status has been successfully changed to Approved.",
author: "Alexander Turner",
role: "Analyst Perspective on Transaction",
time: "34m ago",
fromStatus: "Ready to Review",
toStatus: "Approved",
icon: <FiCheckCircle className="w-4 h-4" />,
statusColor: "text-green-600"
},
{
id: 2,
title: "The Accrual has been updated to reflect a status of Reject.",
author: "Alexander Turner",
time: "3h ago",
fromStatus: "Ready to Review",
toStatus: "Rejected",
icon: <FiXCircle className="w-4 h-4" />,
statusColor: "text-red-600"
},
{
id: 3,
title: "The Accrual has been revised for accuracy.",
author: "Alex Turner",
role: "Manager View Transaction State",
time: "7d ago",
fromStatus: "Rejected",
toStatus: "Reviewed",
icon: <FiRotateCcw className="w-4 h-4" />,
statusColor: "text-yellow-600"
},
{
id: 4,
title: "The Accrual state has been updated from 'ready' to 'under review'.",
author: "Alexander Turner",
role: "Analyst Perspective on Transaction",
time: "34m ago",
fromStatus: "Ready to Review",
toStatus: "Reviewed",
icon: <FiEye className="w-4 h-4" />,
statusColor: "text-blue-600"
},
{
id: 5,
title: "The Accrual has been updated from rejected to reviewed.",
author: "Alex Turner",
role: "Analyst View Transaction",
time: "34m ago",
fromStatus: "Rejected",
toStatus: "Reviewed",
icon: <FiRotateCcw className="w-4 h-4" />,
statusColor: "text-blue-600"
}
];
const auditTrail = [
{
id: 1,
title: "Batch 11317 Pickup Request Created",
author: "Sandra Darlington",
location: "Lagos General Hospital Gbagada",
time: "11 Aug, 2023 09:23 AM",
icon: <FiPackage className="w-4 h-4" />,
type: "created"
},
{
id: 2,
title: "Batch 11317 Pickup Request",
author: "Oladejo Israel",
location: "Institute of Human Virology H3Africa BioRepository",
time: "12 Aug, 2023 11:19 AM",
status: "Approved",
icon: <FiCheckCircle className="w-4 h-4" />,
type: "approved"
},
{
id: 3,
title: "Batch 11317 was Initiated",
author: "Sandra Darlington",
location: "Lagos General Hospital Gbagada",
time: "12 Aug, 2023 11:19 AM",
icon: <FiFileText className="w-4 h-4" />,
type: "initiated"
},
{
id: 4,
title: "Sandra Darlington Assigned batch 11317",
assignee: "Yusuf Ahmed",
time: "12 Aug, 2023 11:20 AM",
icon: <FiUserCheck className="w-4 h-4" />,
type: "assigned"
},
{
id: 5,
title: "Batch 11317 was rejected by Yusuf Ahmed",
reason: "due to faulty vehicle",
time: "12 Aug, 2023 11:20 AM",
icon: <FiXCircle className="w-4 h-4" />,
type: "rejected"
},
{
id: 6,
title: "Sandra Darlington Assigned batch 11317",
assignee: "Kolado Jolade",
time: "12 Aug, 2023 11:20 AM",
icon: <FiUserCheck className="w-4 h-4" />,
type: "assigned"
},
{
id: 7,
title: "Logger Synced",
deviceId: "ID: LGR-0421",
status: "95% remaining",
time: "12 Aug, 2023 11:25 AM",
icon: <FiCheckCircle className="w-4 h-4" />,
type: "synced"
},
{
id: 8,
title: "Logger Disconnected",
deviceId: "ID: LGR-0421",
time: "12 Aug, 2023 11:25 AM",
icon: <FiAlertTriangle className="w-4 h-4" />,
type: "disconnected"
}
];
const getStatusBadge = (status: string) => {
const statusClasses = {
'Approved': 'bg-green-100 text-green-800',
'Rejected': 'bg-red-100 text-red-800',
'Reviewed': 'bg-yellow-100 text-yellow-800',
'Ready to Review': 'bg-blue-100 text-blue-800'
};
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
};
const getAuditTypeColor = (type: string) => {
const colors = {
'created': 'text-blue-600',
'approved': 'text-green-600',
'initiated': 'text-purple-600',
'assigned': 'text-indigo-600',
'rejected': 'text-red-600',
'synced': 'text-green-600',
'disconnected': 'text-orange-600'
};
return colors[type as keyof typeof colors] || 'text-gray-600';
};
return (
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
<div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col">
{/* Header */}
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
<div className="flex items-center">
<h2 className="text-xl font-semibold text-white">
Audit Status
</h2>
</div>
<button
onClick={closeModal}
className="text-white cursor-pointer transition-colors"
>
<FiX className="w-5 h-5" />
</button>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto p-4">
<div className="space-y-1.5">
<div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
{statusHistory.slice(0, 2).map((item) => (
<div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
<div className={`${item.statusColor} mt-1`}>
{item.icon}
</div>
<div className="flex-1">
<p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
<span>By {item.author}</span>
{item.role && (
<>
<span>•</span>
<span className="text-blue-600 text-xs">({item.role})</span>
</>
)}
</div>
<div className="flex items-center space-x-3">
<span className="text-xs text-gray-500">{item.time}</span>
<div className="flex items-center space-x-2">
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
{item.fromStatus}
</span>
<span className="text-gray-400">→</span>
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
{item.toStatus}
</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
{/* Footer */}
<div className="flex justify-end p-2 border-t border-gray-200">
<button
onClick={closeModal}
className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
>
Close
</button>
</div>
</div>
</div>
);
};
export default AuditModal;

44
src/components/transactions/TransactionView.tsx
View File

@ -1,5 +1,5 @@
import { AiFillSignature } from 'react-icons/ai'; import { AiFillSignature } from 'react-icons/ai';
import { Link, useNavigate, useParams } from 'react-router-dom'; import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { LuGitGraph } from 'react-icons/lu'; import { LuGitGraph } from 'react-icons/lu';
import AccountNav from '../accounts/AccountNav'; import AccountNav from '../accounts/AccountNav';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -10,6 +10,7 @@ import { MdEditDocument } from "react-icons/md";
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { RootState } from '../../store/store'; import { RootState } from '../../store/store';
import { SignTypeEnum } from '../../utlity/types'; import { SignTypeEnum } from '../../utlity/types';
import AuditModal from './AuditModal';
// Sample recipient data — you can replace this with actual API data later // Sample recipient data — you can replace this with actual API data later
const recipients = [ const recipients = [
@ -44,6 +45,35 @@ const TransactionView = () => {
const [transactionDetails, setTransactionDetails] = useState(null); const [transactionDetails, setTransactionDetails] = useState(null);
const [signingOrderModal, setSigningOrderModal] = useState({ open: false }); const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
const user = useSelector((state: RootState) => state.user) const user = useSelector((state: RootState) => state.user)
const location = useLocation();
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
// update whenever location changes
setIsModalOpen(location.search.includes("auditStatus"));
}, [location]);
const handleOpenAuditModal = () => {
const { pathname, search } = location;
let newSearch = search
? search.includes("auditStatus")
? search
: `${search}&auditStatus`
: "?auditStatus";
window.history.pushState({}, "", pathname + newSearch);
setIsModalOpen(true); // ✅ update state immediately
};
const closeModal = () => {
let search = location.search
.replace(/[?&]auditStatus\b/, "")
.replace(/^&/, "?")
.replace(/\?$/, "");
window.history.pushState({}, "", location.pathname + search);
setIsModalOpen(false); // ✅ update state immediately
};
console.log(transactionDetails, "line 37"); console.log(transactionDetails, "line 37");
@ -99,9 +129,13 @@ const TransactionView = () => {
More More
</button> </button>
<Link className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}> {/* <Link className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}>
Edit Edit
</Link> </Link> */}
<button className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
Audit
</button>
</div> </div>
<hr className='my-6 border-slate-200' /> <hr className='my-6 border-slate-200' />
@ -138,7 +172,7 @@ const TransactionView = () => {
</div> </div>
{recipient.email === user.email && recipient.status !== "COMPLETED" && {recipient.email === user.email && recipient.status !== "COMPLETED" &&
<p <p
onClick={() => handleNavigateToSign(recipient.id)} onClick={() => handleNavigateToSign(recipient.id)}
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'> className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
Sign Sign
</p>} </p>}
@ -207,6 +241,8 @@ const TransactionView = () => {
</div> </div>
</div> </div>
} }
{isModalOpen && <AuditModal closeModal={closeModal} />}
</> </>
} }
</> </>

60
src/utlity/types.tsx
View File

@ -1,6 +1,6 @@
import { JSX } from "react"; import { JSX } from "react";
export interface DroppedItem { export interface DroppedItemOld {
id?: string; id?: string;
icon: JSX.Element; icon: JSX.Element;
focusElementIndx?: number; focusElementIndx?: number;
@ -122,4 +122,62 @@ export enum TagsTypes {
export enum SignTypeEnum { export enum SignTypeEnum {
selfSign = "self_sign", selfSign = "self_sign",
multipleSign = "multi_sign" multipleSign = "multi_sign"
}
interface StylesInterface {
font: string,
italic: boolean,
bold: boolean,
underline: boolean,
color: string,
textSize: number
}
export interface DroppedItem {
id?: string;
icon: JSX.Element;
label?: string;
type: string;
dimensions: {
left: number;
top: number;
width: number;
height: number;
}
recipientId: number;
documentId: string;
pageIndex: number;
allowSenderToEdit: true;
allowSenderToDelete: true;
required?: boolean;
maskType?: string;
maskCharacter?: string;
format?: string;
selectedValue?: string | null;
radioGroups?: DroppedItem[];
options?: string[]
focusElementIndx?: number;
value?: string | number;
validation?: {
minLength: number;
maxLength: number;
error: string;
regex: string[];
};
isDeleted: boolean;
} }