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

Compare commits

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

No commits in common. "6ef3e36141a0eb8fa5693f93878f754a18722714" and "b807c0c76871bc3f86b75bdc932e0363affd3a9a" have entirely different histories.
6ef3e36141 ... b807c0c768

10 changed files with 565 additions and 967 deletions
Show Stats Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useEffect, useLayoutEffect, useState } from "react"; import { useEffect, useState } from "react";
import axios from "axios" import axios from "axios"
import { RootState } from "../../store/store"; import { RootState } from "../../store/store";
@ -26,8 +26,6 @@ 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";
@ -141,6 +139,12 @@ 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();
@ -231,8 +235,6 @@ const SignDocument = () => {
}, [droppedItems]) }, [droppedItems])
console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
useEffect(() => { useEffect(() => {
if (recSignStatus === "COMPLETED") { if (recSignStatus === "COMPLETED") {
// setHideTags(true); // setHideTags(true);
@ -717,7 +719,6 @@ 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,
@ -1046,6 +1047,7 @@ 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
@ -1066,14 +1068,10 @@ const SignDocument = () => {
<div <div
tabIndex={1} tabIndex={1}
onFocus={() => { onFocus={() => setFocusElement({ ...item, focusElementIndx: index })}
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={{
@ -1085,15 +1083,6 @@ 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 &&
@ -1134,7 +1123,7 @@ const SignDocument = () => {
</input> */} </input> */}
{ {
!item.multiLine && <p item.subType === "SINGLE_LINE" && <p
// name={item.id} // name={item.id}
// style={{ height: item.dimensions.height + "px" }} // style={{ height: item.dimensions.height + "px" }}
onInput={(e) => { onInput={(e) => {
@ -1149,7 +1138,7 @@ const SignDocument = () => {
></p> ></p>
} }
{ {
item.multiLine && <p item.subType === "PARAGRAPH" && <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);
@ -1160,7 +1149,7 @@ const SignDocument = () => {
</p> </p>
} }
{ {
"maskType" in item && "maskCharacter" in item && item.maskType && <p item.subType === "PASSWORD" && item.mask && <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);
@ -1168,13 +1157,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.maskType === "string" && typeof val === "string") { if (typeof item.mask?.maskType === "string" && typeof val === "string") {
val = val.replace(/ /g, ""); val = val.replace(/ /g, "");
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter) e.target.textContent = maskUtils((item.mask as { maskType: string }).maskType, val, (item.mask as { maskCharacter: string }).maskCharacter)
} }
}} }}
contentEditable={true} contentEditable={true}
@ -1185,125 +1174,6 @@ 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 */}
{ {
@ -1533,12 +1403,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" }}
@ -1598,27 +1468,11 @@ const SignDocument = () => {
</div> </div>
<div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}> <div className={`col-span-2 ${provideTags ? "" : "order-first"}`}>
{/* <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 h-[12vw]"> <div className="grid grid-cols-3 gap-4">
<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 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 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`}
> >
{/* 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-6 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2> <h2 className="mt-3 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 max-w-5xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 ">
{/* Left Panel - Configuration */} {/* Left Panel - Configuration */}
<div className="space-y-6 "> <div className="space-y-6 ">

469
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, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar'; import RightSideBar, { 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,24 +89,141 @@ 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); recTags[key].push({ ...tag, update: false });
} else { } else {
recTags[key] = [tag]; // Initialize with an array recTags[key] = [{ ...tag, update: false }]; // Initialize with an array
}
}
}
// console.log(recTags, "Line 83");
setDroppedItems(recTags)
// Handle your response here
} catch (err) {
console.error(err);
}
};
// FETCHING TAG - START
useEffect(() => {
if (selectedRecipients.length === 0) return;
fetchTags();
}, [selectedRecipients]);
// FETCHING TAG - END
const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1);
const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
// NAVIGATING to Dashboard if Transaction is not created - START
useLayoutEffect(() => {
if (transactionId) return;
navigate("/");
}, [transactionId])
// NAVIGATING to Dashboard if Transaction is not created - END
const groupByRecipientId = (tagsArray: any[]) => {
const tagsData: Record<number, any[]> = {};
for (const tag of tagsArray) {
const recipientId = tag.recipientId;
if (!tagsData[recipientId]) {
tagsData[recipientId] = [];
}
tagsData[recipientId].push(tag);
}
return tagsData;
};
const sendTagsToRecipients = async (
tagsData: Record<number, any[]>,
accountId: string,
transactionId: string
) => {
// tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
// Filter Tags that needs to update
const updatedData = {}
// debugger
for (const [recipientId, tags] of Object.entries(tagsData)) {
// console.log(recipientId, tags, "line 133")
const updateTags = []
for (const tag of tags) {
if ("update" in tag && tag.update) {
updateTags.push(tag)
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update
}
}
updatedData[recipientId] = updateTags
}
const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
if (tags.length === 0) return false;
return api.put(
`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
tags
);
});
try {
const response = await Promise.all(requests);
let recTags = droppedItems;
for (const res of response) {
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);
} catch (error) {
console.error("Error submitting recipient tags:", error);
}
};
const handleTransactionProcess = async (save: boolean = false) => {
console.log(droppedItems, "called Line 189");
if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return;
!save && dispatch(showLoader("Loading ..."))
let updatedTags = { ...droppedItems }
// const sendTags = {
// "mod": [],
// "remove": []
// }
let updatedTags = { ...recTags }
let tagsData = [] let tagsData = []
for (const dropPageIds of Object.keys(updatedTags)) { // const modified = []
// const remove = []
// console.log(updatedTags, "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
@ -124,6 +241,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
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,
@ -154,15 +272,10 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
"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("format" in dropTag && dropTag.format) {
updatedTagData.subType = dropTag.format.toLowerCase();
updatedTagData.format = dropTag.dateFormat;
} }
if (`${dropTag.type}`.toLowerCase() === "number") { if (`${dropTag.type}`.toLowerCase() === "number") {
@ -170,16 +283,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
updatedTagData.isCurrency = dropTag.isCurrency updatedTagData.isCurrency = dropTag.isCurrency
} }
if (dropTag.type === "TEXT") { if (updatedTagData.type === "TEXT") {
// updatedTagData.multiLine = dropTag.subType === "paragraph" updatedTagData.multiLine = dropTag.subType === "paragraph"
if (dropTag.subType === "password") {
if(dropTag.multiLine) {
updatedTagData.subtype = TEXT.PARAGRAPH
} else {
updatedTagData.subtype = TEXT.SINGLE_LINE
}
if ("maskType" in dropTag) {
updatedTagData.maskCharacter = mask.character updatedTagData.maskCharacter = mask.character
updatedTagData.maskType = mask.type updatedTagData.maskType = mask.type
} }
@ -201,218 +307,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
} }
} }
setDroppedItems(recTags) tagsData = groupByRecipientId(tagsData);
// Handle your response here
} catch (err) {
console.error(err);
}
};
// FETCHING TAG - START
useEffect(() => {
if (selectedRecipients.length === 0) return;
fetchTags();
}, [selectedRecipients]);
// FETCHING TAG - END
const [droppedItemsCounter, setDroppedItemsCounter] = useState<number>(1); console.log("Hefre is the line 299", tagsData);
const [selectedTag, setSelectedTag] = useState<{ key: string, index: number } | null>(null);
// NAVIGATING to Dashboard if Transaction is not created - START
useLayoutEffect(() => {
if (transactionId) return;
navigate("/");
}, [transactionId])
// NAVIGATING to Dashboard if Transaction is not created - END
const groupByRecipientId = (tagsArray: any[]) => {
const tagsData: Record<number, any[]> = {};
for (const tag of tagsArray) {
const recipientId = tag.recipientId;
if (!tagsData[recipientId]) {
tagsData[recipientId] = [];
}
tagsData[recipientId].push(tag);
}
return tagsData;
};
const sendTagsToRecipients = async (
tagsData: Record<number, any[]>,
accountId: string,
transactionId: string
) => {
// tagsData = tagsData.filter((tag, indx) => (("update" in tag && tag.update) || !("id" in tag)) )
// Filter Tags that needs to update
const updatedData = {}
// debugger
for (const [recipientId, tags] of Object.entries(tagsData)) {
// console.log(recipientId, tags, "line 133")
const updateTags = []
for (const tag of tags) {
if ("update" in tag && tag.update) {
updateTags.push(tag)
}
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
delete updateTags[updateTags.length - 1].update
}
}
updatedData[recipientId] = updateTags
}
const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
if (tags.length === 0) return false;
return api.put(
`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
tags
);
});
try {
const responses = await Promise.all(requests);
const droppedItemsUpdateFalse = Object.fromEntries(
Object.entries(droppedItems).map(([recipientId, tags]) => {
return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
})
)
console.log(droppedItemsUpdateFalse, "Line 182")
// setDroppedItems(droppedItemsUpdateFalse);
} catch (error) {
console.error("Error submitting recipient tags:", error);
}
};
const handleTransactionProcess = async (save: boolean = false) => {
if (Object.keys(droppedItems).length === 0) return;
if (!save && isSend === null) return;
// !save && dispatch(showLoader("Loading ..."))
// let updatedTags = { ...droppedItems }
// const sendTags = {
// "mod": [],
// "remove": []
// }
// let tagsData = []
// const modified = []
// const remove = []
// console.log(updatedTags, "updatedTags");
// 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 (`${dropTag.type}`.toLowerCase() === "number") {
// updatedTagData.decimalPlace = dropTag.decimalPlace
// updatedTagData.isCurrency = dropTag.isCurrency
// }
// if (updatedTagData.type === "TEXT") {
// 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.options && !updatedTagData.options.length) delete updatedTagData.options;
// if (!updatedTagData.id) delete updatedTagData.id;
// if (!isDeleted) {
// // sendTags.mod.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]);
}
console.log(updatedTags, "updatedTags")
let tagsData = groupByRecipientId(updatedTags);
await sendTagsToRecipients(tagsData, accountId, transactionId); await sendTagsToRecipients(tagsData, accountId, transactionId);
// if (save) { // if (save) {
// if (selectedRecipients.length === 0) return; // setSelectedTag(null);
// fetchTags(); // await fetchTags();
// setSelectedTag(null)
// } // }
// SENDING Transaction - START // SENDING Transaction - START
@ -436,7 +340,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);
@ -479,11 +383,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />; // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
let prepData = { let prepData = {
...data.properties, 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,
@ -1049,6 +953,85 @@ 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 */}
@ -1180,6 +1163,7 @@ 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}
@ -1205,16 +1189,17 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
</div > </div >
{selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar {
droppedItems={droppedItems} console.log(selectedTag, droppedItems, "Line 1175")
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,7 +99,6 @@ 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,
}); });
} }
}, 1000) }, 0)
} }
const handleSetIsFields = (setTo: boolean) => { const handleSetIsFields = (setTo: boolean) => {

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

@ -67,10 +67,7 @@ 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') { if (e.key === 'Enter') handlePositionInputBlur(type);
e.preventDefault();
handlePositionInputBlur(type)
};
}; };
useEffect(() => { useEffect(() => {
@ -109,13 +106,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 type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up"> <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 type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left"> <button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
<FaArrowLeft /> <FaArrowLeft />
</button> </button>
@ -124,7 +121,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={leftValue} value={leftValue}
onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}} onChange={(e) => 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}
@ -134,7 +131,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
<input <input
type="number" type="number"
value={topValue} value={topValue}
onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}} onChange={(e) => 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}
@ -143,13 +140,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
/> />
</div> </div>
<button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right"> <button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
<FaArrowRight /> <FaArrowRight />
</button> </button>
</div> </div>
{/* Bottom */} {/* Bottom */}
<button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down"> <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 */}

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

@ -27,18 +27,16 @@ 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,
signClient: boolean, DirectionalControlsProps: {
// DirectionalControlsProps: { onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
// onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void; disabled?: boolean;
// disabled?: boolean; stepSize?: number;
// stepSize?: number; className?: string;
// className?: string; }
// }
} }
export enum TEXT { export enum TEXT {
@ -105,12 +103,14 @@ const defaultStyles = {
const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => { const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => {
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,12 +118,32 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
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" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") { // if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
// // 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
// };
// });
if (!signClient) { // } else
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
console.log("Second check")
console.log("Line 161")
setDroppedItems((prev) => ( setDroppedItems((prev) => (
{ {
...prev, ...prev,
@ -134,19 +154,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
: [], : [],
} }
)); ));
} 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)) { else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
console.log("Third check")
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
if (!signClient) {
setDroppedItems((prev) => ( setDroppedItems((prev) => (
{ {
...prev, ...prev,
@ -157,22 +171,15 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
: [], : [],
}// 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) {
@ -186,8 +193,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
// changeWith = changeWith + " " + val; // changeWith = changeWith + " " + val;
// } // }
if (!signClient) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updatedArray = Array.isArray(prev[selTagKey]) const updatedArray = Array.isArray(prev[selTagKey])
? prev[selTagKey].map((item, i) => { ? prev[selTagKey].map((item, i) => {
@ -205,18 +210,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
[selTagKey]: updatedArray, [selTagKey]: updatedArray,
}; };
}); });
} else {
setDroppedItems((prev) => {
const updated = [...prev];
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
return updated;
})
}
} }
else { else {
if (!signClient) {
setDroppedItems((prev) => { setDroppedItems((prev) => {
const updatedItems = Array.isArray(prev[selTagKey]) const updatedItems = Array.isArray(prev[selTagKey])
@ -225,18 +221,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
) )
: []; : [];
console.log('Updated items:', updatedItems);
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)
@ -328,110 +319,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
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 (
<> <>

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, { useState } from "react";
import { import {
FiX, FiX,
FiCheckCircle, FiCheckCircle,
@ -14,205 +14,166 @@ import {
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 { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>(); const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
if (!accountId || !transactionId) {
window.location.href = "/";
return null;
}
let [auditStatus, setAuditStatus] = useState([])
let [loading, setLoading] = useState(false)
const getAuditDetails = async () => {
setLoading(true)
try {
let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit`)
if (res?.status === 200) {
// console.log(res?.data?.events)
let auditResponse = res?.data?.events
setAuditStatus(auditResponse)
}
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
useEffect(() => {
if (accountId && transactionId) {
getAuditDetails()
}
}, [accountId, transactionId])
const statusHistory = [ const statusHistory = [
{ {
"action": "SENT", id: 1,
"message": "Transaction Sent by John Doe <john@email.com>", title: "The Accrual status has been successfully changed to Approved.",
"status": "SENT", author: "Alexander Turner",
"eventData": { role: "Analyst Perspective on Transaction",
"ip": "192.168.1.1", time: "34m ago",
"longitude": "3.3792", fromStatus: "Ready to Review",
"latitude": "6.5244", toStatus: "Approved",
"timezone": "WAT" icon: <FiCheckCircle className="w-4 h-4" />,
}, statusColor: "text-green-600"
"timestamp": "2025-01-15T10:30:00Z",
"language": "en"
}, },
{ {
"action": "INVITED", id: 2,
"message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents", title: "The Accrual has been updated to reflect a status of Reject.",
"status": "SENT", author: "Alexander Turner",
"eventData": { time: "3h ago",
"ip": "0.0.0.0", fromStatus: "Ready to Review",
"longitude": "11", toStatus: "Rejected",
"latitude": "12", icon: <FiXCircle className="w-4 h-4" />,
"timezone": "" statusColor: "text-red-600"
},
"timestamp": "2025-01-15T11:45:00Z",
"language": "es"
}, },
{ {
"action": "VIEWED", id: 3,
"message": "Document viewed by recipient Alice Johnson <alice@email.com>", title: "The Accrual has been revised for accuracy.",
"status": "VIEWED", author: "Alex Turner",
"eventData": { role: "Manager View Transaction State",
"ip": "203.0.113.5", time: "7d ago",
"longitude": "-74.0059", fromStatus: "Rejected",
"latitude": "40.7128", toStatus: "Reviewed",
"timezone": "EST" icon: <FiRotateCcw className="w-4 h-4" />,
}, statusColor: "text-yellow-600"
"timestamp": "2025-01-15T14:20:00Z",
"language": "en"
}, },
{ {
"action": "SIGNED", id: 4,
"message": "Document signed by Bob Wilson <bob@email.com>", title: "The Accrual state has been updated from 'ready' to 'under review'.",
"status": "COMPLETED", author: "Alexander Turner",
"eventData": { role: "Analyst Perspective on Transaction",
"ip": "198.51.100.10", time: "34m ago",
"longitude": "-122.4194", fromStatus: "Ready to Review",
"latitude": "37.7749", toStatus: "Reviewed",
"timezone": "PST" icon: <FiEye className="w-4 h-4" />,
statusColor: "text-blue-600"
}, },
"timestamp": "2025-01-15T16:10:00Z", {
"language": "en" 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 getActionIcon = (action: string) => { const auditTrail = [
const icons = { {
'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />, id: 1,
'SENT': <FiSend className="w-4 h-4" />, title: "Batch 11317 Pickup Request Created",
'INVITED': <FiMail className="w-4 h-4" />, author: "Sandra Darlington",
'COMPLETED': <FiCheckCircle className="w-4 h-4" />, location: "Lagos General Hospital Gbagada",
'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />, time: "11 Aug, 2023 09:23 AM",
'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />, icon: <FiPackage className="w-4 h-4" />,
'VIEWED': <FiEye className="w-4 h-4" />, type: "created"
'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" />, id: 2,
'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />, title: "Batch 11317 Pickup Request",
'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />, author: "Oladejo Israel",
'SIGNED': <FiCheckCircle className="w-4 h-4" />, location: "Institute of Human Virology H3Africa BioRepository",
'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />, time: "12 Aug, 2023 11:19 AM",
'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />, status: "Approved",
'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />, icon: <FiCheckCircle className="w-4 h-4" />,
'PENDING': <FiClock className="w-4 h-4" />, type: "approved"
'ASSIGNED': <FiUserCheck className="w-4 h-4" />, },
'REASSIGNED': <FiUserPlus className="w-4 h-4" />, {
'EDITED': <FiEdit className="w-4 h-4" />, id: 3,
}; title: "Batch 11317 was Initiated",
author: "Sandra Darlington",
return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />; location: "Lagos General Hospital Gbagada",
}; time: "12 Aug, 2023 11:19 AM",
icon: <FiFileText className="w-4 h-4" />,
const getActionColor = (action: string, status: string) => { type: "initiated"
if (status === 'COMPLETED') return 'text-green-600'; },
if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600'; {
if (status === 'PENDING') return 'text-yellow-600'; id: 4,
title: "Sandra Darlington Assigned batch 11317",
const colors = { assignee: "Yusuf Ahmed",
'SENT': 'text-blue-600', time: "12 Aug, 2023 11:20 AM",
'INVITED': 'text-indigo-600', icon: <FiUserCheck className="w-4 h-4" />,
'VIEWED': 'text-purple-600', type: "assigned"
'SIGNED': 'text-green-600', },
'REJECTED': 'text-red-600' {
}; id: 5,
return colors[action as keyof typeof colors] || 'text-gray-600'; 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 getStatusBadge = (status: string) => {
const statusClasses = { const statusClasses = {
'SENT': 'bg-blue-100 text-blue-800', 'Approved': 'bg-green-100 text-green-800',
'COMPLETED': 'bg-green-100 text-green-800', 'Rejected': 'bg-red-100 text-red-800',
'FAILED': 'bg-red-100 text-red-800', 'Reviewed': 'bg-yellow-100 text-yellow-800',
'PENDING': 'bg-yellow-100 text-yellow-800', 'Ready to Review': 'bg-blue-100 text-blue-800'
'VIEWED': 'bg-purple-100 text-purple-800',
'REJECTED': 'bg-red-100 text-red-800'
}; };
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800'; return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
}; };
const formatTimestamp = (timestamp: string) => { const getAuditTypeColor = (type: string) => {
try { const colors = {
const date = new Date(timestamp); 'created': 'text-blue-600',
if (isNaN(date.getTime())) { 'approved': 'text-green-600',
return timestamp; 'initiated': 'text-purple-600',
} 'assigned': 'text-indigo-600',
'rejected': 'text-red-600',
const now = new Date(); 'synced': 'text-green-600',
const diffMs = now.getTime() - date.getTime(); 'disconnected': 'text-orange-600'
const diffMins = Math.floor(diffMs / (1000 * 60));
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
if (diffMins < 60) {
return `${diffMins}m ago`;
} else if (diffHours < 24) {
return `${diffHours}h ago`;
} else if (diffDays < 7) {
return `${diffDays}d ago`;
} else {
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
}
} catch (error) {
return timestamp;
}
}; };
return colors[type as keyof typeof colors] || 'text-gray-600';
const extractEmailFromMessage = (message: string) => {
const emailMatch = message.match(/<([^>]+)>/);
return emailMatch ? emailMatch[1] : '';
}; };
return ( return (
@ -227,84 +188,57 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
</div> </div>
<button <button
onClick={closeModal} onClick={closeModal}
className="text-white cursor-pointer transition-colors hover:text-gray-200" className="text-white cursor-pointer transition-colors"
> >
<FiX className="w-5 h-5" /> <FiX className="w-5 h-5" />
</button> </button>
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 overflow-y-auto p-4 no-scrollbar"> <div className="flex-1 overflow-y-auto p-4">
{/* {loading ? <LoaderUi /> : ""} */}
{auditStatus.length ?
<div className="space-y-1.5"> <div className="space-y-1.5">
{/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */} <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"> {statusHistory.slice(0, 2).map((item) => (
<div className={`${getActionColor(item.action)} mt-1`}> <div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
{getActionIcon(item.action)} <div className={`${item.statusColor} mt-1`}>
{item.icon}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p> <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"> <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
<span>Action: {item.action}</span> <span>By {item.author}</span>
{extractEmailFromMessage(item.message) && ( {item.role && (
<> <>
<span>•</span> <span>•</span>
<span className="text-blue-600">{extractEmailFromMessage(item.message)}</span> <span className="text-blue-600 text-xs">({item.role})</span>
</> </>
)} )}
</div> </div>
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2 mb-2"> <span className="text-xs text-gray-500">{item.time}</span>
<span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}> <div className="flex items-center space-x-2">
{item.status} <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> </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> </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> </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>
))} ))}
</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>
}
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50"> <div className="flex justify-end p-2 border-t border-gray-200">
<div className="text-sm text-gray-600">
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
</div>
<button <button
onClick={closeModal} 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" className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"

60
src/utlity/types.tsx
View File

@ -1,6 +1,6 @@
import { JSX } from "react"; import { JSX } from "react";
export interface DroppedItemOld { export interface DroppedItem {
id?: string; id?: string;
icon: JSX.Element; icon: JSX.Element;
focusElementIndx?: number; focusElementIndx?: number;
@ -123,61 +123,3 @@ 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;
}