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

Compare commits

base: BhawanSingh:b807c0c76871bc3f86b75bdc932e0363affd3a9a
Branches Tags
BhawanSingh:master
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:bhagwanSingh
...
compare: BhawanSingh:6ef3e36141a0eb8fa5693f93878f754a18722714
Branches Tags
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:master
BhawanSingh:bhagwanSingh

3 Commits
b807c0c768 ... 6ef3e36141

Author SHA1 Message Date
JaiPandey425 6ef3e36141 audit 2025-08-13 13:43:31 +05:30
=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
10 changed files with 962 additions and 560 deletions
Show Stats Expand all files Collapse all files

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 */}

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>

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

@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => {
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 "> <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
{/* Left Panel - Configuration */} {/* Left Panel - Configuration */}
<div className="space-y-6 "> <div className="space-y-6 ">

407
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, { TEXT } 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,119 +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 = {
// "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,
// }
const updatedTagData = { // if ("format" in dropTag) {
"id": "id" in dropTag ? dropTag.id : null, // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
"label": dropTag.label, // updatedTagData.dateFormat = dropTag.format;
"dimensions": dropTag.dimensions, // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
"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) { // if (`${dropTag.type}`.toLowerCase() === "number") {
updatedTagData.format = `${dropTag.subType}`.toUpperCase(); // updatedTagData.decimalPlace = dropTag.decimalPlace
updatedTagData.dateFormat = dropTag.format; // updatedTagData.isCurrency = dropTag.isCurrency
updatedTagData.currentTimeStamp = dropTag.currentTimeStamp // }
}
if (`${dropTag.type}`.toLowerCase() === "number") { // if (updatedTagData.type === "TEXT") {
updatedTagData.decimalPlace = dropTag.decimalPlace // updatedTagData.multiLine = dropTag.subType === "paragraph"
updatedTagData.isCurrency = dropTag.isCurrency // if (dropTag.subType === "password") {
} // updatedTagData.maskCharacter = mask.character
// updatedTagData.maskType = mask.type
// }
// }
if (updatedTagData.type === "TEXT") { // // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
updatedTagData.multiLine = dropTag.subType === "paragraph"
if (dropTag.subType === "password") {
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.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT" // if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
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 (!updatedTagData.id) delete updatedTagData.id; // if (!isDeleted) {
// // sendTags.mod.push(updatedTagData);
// tagsData.push(updatedTagData)
// }
// }
// }
if (!isDeleted) { let updatedTags : any = [];
// sendTags.mod.push(updatedTagData);
tagsData.push(updatedTagData) 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
@ -340,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);
@ -383,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,
@ -953,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 */}
@ -1163,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}
@ -1189,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 */}

287
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 (
<> <>

518
src/components/transactions/AuditModal.tsx
View File

@ -1,254 +1,320 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
FiX, FiX,
FiCheckCircle, FiCheckCircle,
FiXCircle, FiXCircle,
FiClock, FiClock,
FiUser, FiUser,
FiCalendar, FiCalendar,
FiFileText, FiFileText,
FiAlertTriangle, FiAlertTriangle,
FiTruck, FiTruck,
FiUserCheck, FiUserCheck,
FiUserX, FiUserX,
FiPackage, FiPackage,
FiMapPin, FiMapPin,
FiEye, FiEye,
FiRotateCcw FiRotateCcw,
FiSend,
FiMail,
FiActivity,
FiRefreshCw,
FiLock,
FiUnlock,
FiUserPlus,
FiEdit
} from "react-icons/fi"; } from "react-icons/fi";
import api from "../../config/api";
import { useParams } from "react-router-dom";
import logoRecord from '../../assets/record.svg'
import LoaderUi from "../../helper/LoaderUi";
import { FaRegEyeSlash } from "react-icons/fa";
import { MdAccessTime, MdCancel } from "react-icons/md";
interface AuditModalProps { interface AuditModalProps {
closeModal: () => void; closeModal: () => void;
} }
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => { const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status'); const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
const statusHistory = [ if (!accountId || !transactionId) {
{ window.location.href = "/";
id: 1, return null;
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 = [ let [auditStatus, setAuditStatus] = useState([])
{ let [loading, setLoading] = useState(false)
id: 1, const getAuditDetails = async () => {
title: "Batch 11317 Pickup Request Created", setLoading(true)
author: "Sandra Darlington", try {
location: "Lagos General Hospital Gbagada", let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
time: "11 Aug, 2023 09:23 AM", if (res?.status === 200) {
icon: <FiPackage className="w-4 h-4" />, // console.log(res?.data?.events)
type: "created" let auditResponse = res?.data?.events
}, setAuditStatus(auditResponse)
{ }
id: 2, } catch (error) {
title: "Batch 11317 Pickup Request", console.log(error)
author: "Oladejo Israel", } finally {
location: "Institute of Human Virology H3Africa BioRepository", setLoading(false)
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) => { useEffect(() => {
const statusClasses = { if (accountId && transactionId) {
'Approved': 'bg-green-100 text-green-800', getAuditDetails()
'Rejected': 'bg-red-100 text-red-800', }
'Reviewed': 'bg-yellow-100 text-yellow-800', }, [accountId, transactionId])
'Ready to Review': 'bg-blue-100 text-blue-800'
const statusHistory = [
{
"action": "SENT",
"message": "Transaction Sent by John Doe <john@email.com>",
"status": "SENT",
"eventData": {
"ip": "192.168.1.1",
"longitude": "3.3792",
"latitude": "6.5244",
"timezone": "WAT"
},
"timestamp": "2025-01-15T10:30:00Z",
"language": "en"
},
{
"action": "INVITED",
"message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
"status": "SENT",
"eventData": {
"ip": "0.0.0.0",
"longitude": "11",
"latitude": "12",
"timezone": ""
},
"timestamp": "2025-01-15T11:45:00Z",
"language": "es"
},
{
"action": "VIEWED",
"message": "Document viewed by recipient Alice Johnson <alice@email.com>",
"status": "VIEWED",
"eventData": {
"ip": "203.0.113.5",
"longitude": "-74.0059",
"latitude": "40.7128",
"timezone": "EST"
},
"timestamp": "2025-01-15T14:20:00Z",
"language": "en"
},
{
"action": "SIGNED",
"message": "Document signed by Bob Wilson <bob@email.com>",
"status": "COMPLETED",
"eventData": {
"ip": "198.51.100.10",
"longitude": "-122.4194",
"latitude": "37.7749",
"timezone": "PST"
},
"timestamp": "2025-01-15T16:10:00Z",
"language": "en"
}
];
const getActionIcon = (action: string) => {
const icons = {
'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
'SENT': <FiSend className="w-4 h-4" />,
'INVITED': <FiMail className="w-4 h-4" />,
'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'VIEWED': <FiEye className="w-4 h-4" />,
'VIEWED_IN_PERSON': <FaRegEyeSlash className="w-4 h-4" />, // Slightly different eye icon
'AUTH_FAILED': <FiXCircle className="w-4 h-4 text-red-500" />,
'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
'SIGNED': <FiCheckCircle className="w-4 h-4" />,
'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
'PENDING': <FiClock className="w-4 h-4" />,
'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
'EDITED': <FiEdit className="w-4 h-4" />,
};
return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
}; };
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
};
const getAuditTypeColor = (type: string) => { const getActionColor = (action: string, status: string) => {
const colors = { if (status === 'COMPLETED') return 'text-green-600';
'created': 'text-blue-600', if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
'approved': 'text-green-600', if (status === 'PENDING') return 'text-yellow-600';
'initiated': 'text-purple-600',
'assigned': 'text-indigo-600', const colors = {
'rejected': 'text-red-600', 'SENT': 'text-blue-600',
'synced': 'text-green-600', 'INVITED': 'text-indigo-600',
'disconnected': 'text-orange-600' 'VIEWED': 'text-purple-600',
'SIGNED': 'text-green-600',
'REJECTED': 'text-red-600'
};
return colors[action as keyof typeof colors] || 'text-gray-600';
}; };
return colors[type as keyof typeof colors] || 'text-gray-600';
};
return ( const getStatusBadge = (status: string) => {
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50"> const statusClasses = {
<div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col"> 'SENT': 'bg-blue-100 text-blue-800',
{/* Header */} 'COMPLETED': 'bg-green-100 text-green-800',
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md"> 'FAILED': 'bg-red-100 text-red-800',
<div className="flex items-center"> 'PENDING': 'bg-yellow-100 text-yellow-800',
<h2 className="text-xl font-semibold text-white"> 'VIEWED': 'bg-purple-100 text-purple-800',
Audit Status 'REJECTED': 'bg-red-100 text-red-800'
</h2> };
</div> return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
<button };
onClick={closeModal}
className="text-white cursor-pointer transition-colors"
>
<FiX className="w-5 h-5" />
</button>
</div>
{/* Content */} const formatTimestamp = (timestamp: string) => {
<div className="flex-1 overflow-y-auto p-4"> try {
const date = new Date(timestamp);
if (isNaN(date.getTime())) {
return timestamp;
}
<div className="space-y-1.5"> const now = new Date();
<div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / (1000 * 60));
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
{statusHistory.slice(0, 2).map((item) => ( if (diffMins < 60) {
<div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0"> return `${diffMins}m ago`;
<div className={`${item.statusColor} mt-1`}> } else if (diffHours < 24) {
{item.icon} return `${diffHours}h ago`;
</div> } else if (diffDays < 7) {
<div className="flex-1"> return `${diffDays}d ago`;
<p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p> } else {
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1"> return date.toLocaleDateString('en-US', {
<span>By {item.author}</span> month: 'short',
{item.role && ( day: 'numeric',
<> year: 'numeric',
<span>•</span> hour: '2-digit',
<span className="text-blue-600 text-xs">({item.role})</span> minute: '2-digit'
</> });
)} }
} catch (error) {
return timestamp;
}
};
const extractEmailFromMessage = (message: string) => {
const emailMatch = message.match(/<([^>]+)>/);
return emailMatch ? emailMatch[1] : '';
};
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> </div>
<div className="flex items-center space-x-3"> <button
<span className="text-xs text-gray-500">{item.time}</span> onClick={closeModal}
<div className="flex items-center space-x-2"> className="text-white cursor-pointer transition-colors hover:text-gray-200"
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}> >
{item.fromStatus} <FiX className="w-5 h-5" />
</span> </button>
<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>
))}
{/* Content */}
<div className="flex-1 overflow-y-auto p-4 no-scrollbar">
{/* {loading ? <LoaderUi /> : ""} */}
{auditStatus.length ?
<div className="space-y-1.5">
{/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
{auditStatus.map((item, index) => (
<div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
<div className={`${getActionColor(item.action)} mt-1`}>
{getActionIcon(item.action)}
</div>
<div className="flex-1">
<p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p>
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
<span>Action: {item.action}</span>
{extractEmailFromMessage(item.message) && (
<>
<span>•</span>
<span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
</>
)}
</div>
<div className="flex items-center space-x-2 mb-2">
<span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
{item.status}
</span>
<span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
{item.language && (
<span className="text-xs text-gray-400 uppercase">{item.language}</span>
)}
</div>
{/* Event Data Details */}
{/* <div className="grid grid-cols-2 gap-4 text-xs text-gray-600 bg-gray-50 p-2 rounded">
{item.eventData.ip && (
<div>
<span className="font-medium text-gray-700">IP:</span> {item.eventData.ip}
</div>
)}
{item.eventData.timezone && (
<div>
<span className="font-medium text-gray-700">Timezone:</span> {item.eventData.timezone}
</div>
)}
{item.eventData.latitude && item.eventData.longitude && (
<div className="col-span-2">
<span className="font-medium text-gray-700">Location:</span>
<span className="ml-1">Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude}</span>
</div>
)}
</div> */}
</div>
</div>
))}
</div> :
<div className="flex justify-center items-center">
<img
src={logoRecord}
alt="Record Not Found"
className="w-80 h-80 opacity-70" // adjust size and appearance
/>
</div>
}
</div>
{/* Footer */}
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50">
<div className="text-sm text-gray-600">
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
</div>
<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>
</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; export default AuditModal;

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;
@ -123,3 +123,61 @@ 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;
}