Compare commits
3 Commits
b807c0c768
...
6ef3e36141
| Author | SHA1 | Date |
|---|---|---|
 JaiPandey425
|
6ef3e36141 | |
=bhagwanSingh
|
ac6c42e50a | |
|
=bhagwanSingh
|
6986947cba |
|
|
@ -1,4 +1,4 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useLayoutEffect, useState } from "react";
|
||||
|
||||
import axios from "axios"
|
||||
import { RootState } from "../../store/store";
|
||||
|
|
@ -26,6 +26,8 @@ import typeToIconMap from "../../helper/iconMap";
|
|||
import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
|
||||
import SignCompletionScreen from "./SignCompletionScreen";
|
||||
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 = () => {
|
||||
|
||||
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 dispatch = useDispatch();
|
||||
|
||||
|
|
@ -235,6 +231,8 @@ const SignDocument = () => {
|
|||
}, [droppedItems])
|
||||
|
||||
|
||||
console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
|
||||
|
||||
useEffect(() => {
|
||||
if (recSignStatus === "COMPLETED") {
|
||||
// setHideTags(true);
|
||||
|
|
@ -719,6 +717,7 @@ const SignDocument = () => {
|
|||
// }
|
||||
|
||||
if (prepData.type.toLowerCase() === TagsTypes.SIGNATURE || prepData.type.toLowerCase() === TagsTypes.INITIALS) {
|
||||
|
||||
const currDocTags = droppedItems.filter((val) => val.pageIndex === prepData.pageIndex)
|
||||
setSignConfObj({
|
||||
...signConfObj,
|
||||
|
|
@ -1047,7 +1046,6 @@ const SignDocument = () => {
|
|||
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
|
||||
const key = `${doc.documentId}_${page.index}`;
|
||||
// const tagJsonData = [...droppedItems];
|
||||
|
||||
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
|
||||
return (
|
||||
<div
|
||||
|
|
@ -1068,10 +1066,14 @@ const SignDocument = () => {
|
|||
|
||||
<div
|
||||
tabIndex={1}
|
||||
onFocus={() => setFocusElement({ ...item, focusElementIndx: index })}
|
||||
onFocus={() => {
|
||||
setSelectedTag({ key, index })
|
||||
setFocusElement({ ...item, focusElementIndx: index })
|
||||
}
|
||||
}
|
||||
key={item.id}
|
||||
// draggable="false"
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className="absolute rounded dropped-item text-sm"
|
||||
// onClick={() => handleTagClick(key, index)}
|
||||
style={{
|
||||
|
|
@ -1083,6 +1085,15 @@ const SignDocument = () => {
|
|||
// 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 &&
|
||||
|
|
@ -1123,7 +1134,7 @@ const SignDocument = () => {
|
|||
</input> */}
|
||||
|
||||
{
|
||||
item.subType === "SINGLE_LINE" && <p
|
||||
!item.multiLine && <p
|
||||
// name={item.id}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
onInput={(e) => {
|
||||
|
|
@ -1138,7 +1149,7 @@ const SignDocument = () => {
|
|||
></p>
|
||||
}
|
||||
{
|
||||
item.subType === "PARAGRAPH" && <p
|
||||
item.multiLine && <p
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
|
|
@ -1149,7 +1160,7 @@ const SignDocument = () => {
|
|||
</p>
|
||||
}
|
||||
{
|
||||
item.subType === "PASSWORD" && item.mask && <p
|
||||
"maskType" in item && "maskCharacter" in item && item.maskType && <p
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
|
|
@ -1157,13 +1168,13 @@ const SignDocument = () => {
|
|||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") e.preventDefault();
|
||||
}}
|
||||
onFocus={() => {
|
||||
}}
|
||||
// onFocus={() => {
|
||||
// }}
|
||||
onBlur={(e) => {
|
||||
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, "");
|
||||
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}
|
||||
|
|
@ -1174,6 +1185,125 @@ const SignDocument = () => {
|
|||
}
|
||||
{/* 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 */}
|
||||
{
|
||||
|
|
@ -1403,12 +1533,12 @@ const SignDocument = () => {
|
|||
{
|
||||
(!transparentTags && !hideTags) && (focusElement && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) &&
|
||||
<>
|
||||
<div
|
||||
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" }}
|
||||
>
|
||||
<p>{focusElement.label}</p>
|
||||
</div>
|
||||
{/* <div
|
||||
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" }}
|
||||
>
|
||||
<p>{focusElement.label}</p>
|
||||
</div> */}
|
||||
<div
|
||||
className="absolute left-[-10px] z-50 flex max-w-max"
|
||||
style={{ left: -(item.dimensions.left + 20) + "px", top: ((item.dimensions.height / 2) - 18) + "px" }}
|
||||
|
|
@ -1419,7 +1549,7 @@ const SignDocument = () => {
|
|||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div >
|
||||
</>
|
||||
)
|
||||
})
|
||||
|
|
@ -1468,11 +1598,27 @@ const SignDocument = () => {
|
|||
|
||||
</div>
|
||||
|
||||
<div className={`col-span-2 ${provideTags ? "" : "order-first"}`}>
|
||||
<DocumentPages
|
||||
<div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
|
||||
{/* <DocumentPages
|
||||
selectedDocuments={selectedDocuments}
|
||||
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>
|
||||
|
||||
{/* Right Side - START */}
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const StartSection = () => {
|
|||
<section className="px-4 pt-2 pb-3 w-full">
|
||||
<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 />
|
||||
|
||||
|
|
@ -93,7 +93,7 @@ const StartSection = () => {
|
|||
<div
|
||||
onClick={() => handleStartSectionClick(card.link)}
|
||||
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 */}
|
||||
<div className="flex flex-col gap-3">
|
||||
|
|
@ -124,7 +124,7 @@ const StartSection = () => {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
<TransactionDataTable />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => {
|
|||
</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 */}
|
||||
<div className="space-y-6 ">
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
|
|||
|
||||
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 { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
|
|
@ -89,13 +89,118 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
for (const tag of res.data) {
|
||||
const key = `${tag.documentId}_${tag.pageIndex}`;
|
||||
if (recTags[key]) {
|
||||
recTags[key].push({ ...tag, update: false });
|
||||
recTags[key].push(tag);
|
||||
} 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)
|
||||
// Handle your response here
|
||||
} catch (err) {
|
||||
|
|
@ -125,17 +230,14 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
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;
|
||||
};
|
||||
|
||||
|
|
@ -161,6 +263,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
delete updateTags[updateTags.length - 1].update
|
||||
}
|
||||
}
|
||||
|
||||
updatedData[recipientId] = updateTags
|
||||
}
|
||||
|
||||
|
|
@ -173,29 +276,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
});
|
||||
|
||||
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) {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(droppedItemsUpdateFalse, "Line 182")
|
||||
|
||||
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);
|
||||
|
|
@ -204,119 +294,125 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
|
||||
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 ..."))
|
||||
// !save && dispatch(showLoader("Loading ..."))
|
||||
|
||||
let updatedTags = { ...droppedItems }
|
||||
// let updatedTags = { ...droppedItems }
|
||||
|
||||
// const sendTags = {
|
||||
// "mod": [],
|
||||
// "remove": []
|
||||
// }
|
||||
|
||||
let tagsData = []
|
||||
// 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
|
||||
// for (const dropPageIds of Object.keys(updatedTags)) {
|
||||
// for (const dropTag of updatedTags[dropPageIds]) {
|
||||
// let mask = null
|
||||
|
||||
// console.log(dropTag, "line 132")
|
||||
// // 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
|
||||
}
|
||||
// }
|
||||
// // 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")
|
||||
// // 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 = {
|
||||
"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) {
|
||||
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 (`${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 (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 ("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.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
|
||||
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
|
||||
|
||||
if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
|
||||
// if (!updatedTagData.id) delete updatedTagData.id;
|
||||
|
||||
if (!updatedTagData.id) delete updatedTagData.id;
|
||||
// if (!isDeleted) {
|
||||
// // sendTags.mod.push(updatedTagData);
|
||||
// tagsData.push(updatedTagData)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
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]);
|
||||
}
|
||||
|
||||
tagsData = groupByRecipientId(tagsData);
|
||||
|
||||
console.log(updatedTags, "updatedTags")
|
||||
|
||||
console.log("Hefre is the line 299", tagsData);
|
||||
let tagsData = groupByRecipientId(updatedTags);
|
||||
|
||||
await sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||
|
||||
// if (save) {
|
||||
// setSelectedTag(null);
|
||||
// await fetchTags();
|
||||
// if (selectedRecipients.length === 0) return;
|
||||
// fetchTags();
|
||||
// setSelectedTag(null)
|
||||
// }
|
||||
|
||||
// SENDING Transaction - START
|
||||
|
|
@ -340,7 +436,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
const interval = setInterval(async () => {
|
||||
// debugger
|
||||
setTransactionSaving(true)
|
||||
handleTransactionProcess(true);
|
||||
// handleTransactionProcess(true);
|
||||
}, 8000)
|
||||
// }, 8000)
|
||||
return () => clearInterval(interval);
|
||||
|
|
@ -383,11 +479,11 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
||||
|
||||
let prepData = {
|
||||
properties: data.properties,
|
||||
...data.properties,
|
||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
type: dragElemData.label,
|
||||
label: dragElemData.label,
|
||||
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
dimensions: {
|
||||
left: x,
|
||||
top: y,
|
||||
|
|
@ -953,85 +1049,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
return () => clearTimeout(timeoutId);
|
||||
}, [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 (
|
||||
<>
|
||||
{/* Center Doc Container - START */}
|
||||
|
|
@ -1163,7 +1180,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
/>
|
||||
|
||||
|
||||
|
||||
{/* 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'>
|
||||
page {indx + 1} of {doc.pages && doc.pages.length}
|
||||
|
|
@ -1189,17 +1205,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
</div >
|
||||
|
||||
{
|
||||
console.log(selectedTag, droppedItems, "Line 1175")
|
||||
}
|
||||
{selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
|
||||
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 */}
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -99,6 +99,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
|
|||
.map((type) => prioritized.find((tag: any) => tag.type === type))
|
||||
.filter(Boolean); // remove undefined in case not found
|
||||
|
||||
|
||||
setTagsData([...prioritizedSorted, ...others]);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
|
|||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
}, 0)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleSetIsFields = (setTo: boolean) => {
|
||||
|
|
|
|||
|
|
@ -67,7 +67,10 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
|
||||
if (e.key === 'Enter') handlePositionInputBlur(type);
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handlePositionInputBlur(type)
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -106,13 +109,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
return (
|
||||
<div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
|
||||
{/* 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 />
|
||||
</button>
|
||||
|
||||
{/* Middle: Left / Inputs / Right */}
|
||||
<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 />
|
||||
</button>
|
||||
|
||||
|
|
@ -121,7 +124,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
<input
|
||||
type="number"
|
||||
value={leftValue}
|
||||
onChange={(e) => handlePositionInputChange('left', e.target.value)}
|
||||
onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
|
||||
onBlur={() => handlePositionInputBlur('left')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'left')}
|
||||
disabled={disabled}
|
||||
|
|
@ -131,7 +134,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
<input
|
||||
type="number"
|
||||
value={topValue}
|
||||
onChange={(e) => handlePositionInputChange('top', e.target.value)}
|
||||
onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
|
||||
onBlur={() => handlePositionInputBlur('top')}
|
||||
onKeyPress={(e) => handleKeyPress(e, 'top')}
|
||||
disabled={disabled}
|
||||
|
|
@ -140,13 +143,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
|||
/>
|
||||
</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 />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 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 />
|
||||
</button>
|
||||
{/* Middle Row: Left - Center (Inputs) - Right */}
|
||||
|
|
|
|||
|
|
@ -27,16 +27,18 @@ import DirectionalControls from "./DirectionalControls";
|
|||
// }
|
||||
|
||||
export interface DroppedItemProps {
|
||||
droppedItems: DroppedItem[]
|
||||
selectedTag: DroppedItem
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
|
||||
selTagKey: string,
|
||||
selTagIndx: number,
|
||||
DirectionalControlsProps: {
|
||||
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
}
|
||||
signClient: boolean,
|
||||
// DirectionalControlsProps: {
|
||||
// onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
// disabled?: boolean;
|
||||
// stepSize?: number;
|
||||
// className?: string;
|
||||
// }
|
||||
}
|
||||
|
||||
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];
|
||||
|
||||
console.log("selectedTag", selectedTag, selectedType)
|
||||
|
||||
|
||||
|
||||
const [styles, setStyles] = useState(defaultStyles);
|
||||
|
||||
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
|
||||
|
|
@ -118,71 +118,64 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
|
||||
|
||||
console.log("changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '' || changeWith === '') return
|
||||
|
||||
// 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 (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
|
||||
// } else
|
||||
|
||||
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
console.log("Second check")
|
||||
console.log("Line 161")
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
|
||||
)
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
||||
console.log("Third check")
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...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)) {
|
||||
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
||||
const isCurrency = changeWith === NUMBER.CURRENCY;
|
||||
// const currencyType = null
|
||||
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? 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
|
||||
));
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? 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
|
||||
));
|
||||
} 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) {
|
||||
console.log("Fourth Check")
|
||||
|
||||
let val = timeFormats[0].format;
|
||||
console.log(is24Hrs, "is24Hrs Line 176")
|
||||
|
||||
if (is24Hrs === null) {
|
||||
val = timeFormats[0].format
|
||||
} else if(!is24Hrs) {
|
||||
} else if (!is24Hrs) {
|
||||
val = timeFormats[1].format
|
||||
} else {
|
||||
val = timeFormats[0].format
|
||||
|
|
@ -193,41 +186,57 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
// 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 {
|
||||
...prev,
|
||||
[selTagKey]: updatedArray,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
if (!signClient) {
|
||||
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 {
|
||||
...prev,
|
||||
[selTagKey]: updatedArray,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
setDroppedItems((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
|
||||
return updated;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
else {
|
||||
setDroppedItems((prev) => {
|
||||
|
||||
const updatedItems = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
)
|
||||
: [];
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => {
|
||||
|
||||
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 {
|
||||
...prev,
|
||||
[selTagKey]: updatedItems,
|
||||
};
|
||||
});
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: updatedItems,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
setDroppedItems((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
return updated;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
setDropDownToggle(null)
|
||||
|
|
@ -319,6 +328,110 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
|
|||
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 (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,254 +1,320 @@
|
|||
import React, { useState } from "react";
|
||||
import {
|
||||
FiX,
|
||||
FiCheckCircle,
|
||||
FiXCircle,
|
||||
FiClock,
|
||||
FiUser,
|
||||
FiCalendar,
|
||||
FiFileText,
|
||||
FiAlertTriangle,
|
||||
FiTruck,
|
||||
FiUserCheck,
|
||||
FiUserX,
|
||||
FiPackage,
|
||||
FiMapPin,
|
||||
FiEye,
|
||||
FiRotateCcw
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
FiX,
|
||||
FiCheckCircle,
|
||||
FiXCircle,
|
||||
FiClock,
|
||||
FiUser,
|
||||
FiCalendar,
|
||||
FiFileText,
|
||||
FiAlertTriangle,
|
||||
FiTruck,
|
||||
FiUserCheck,
|
||||
FiUserX,
|
||||
FiPackage,
|
||||
FiMapPin,
|
||||
FiEye,
|
||||
FiRotateCcw,
|
||||
FiSend,
|
||||
FiMail,
|
||||
FiActivity,
|
||||
FiRefreshCw,
|
||||
FiLock,
|
||||
FiUnlock,
|
||||
FiUserPlus,
|
||||
FiEdit
|
||||
} 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 {
|
||||
closeModal: () => void;
|
||||
closeModal: () => void;
|
||||
}
|
||||
|
||||
const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
||||
const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status');
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
const statusHistory = [
|
||||
{
|
||||
id: 1,
|
||||
title: "The Accrual status has been successfully changed to Approved.",
|
||||
author: "Alexander Turner",
|
||||
role: "Analyst Perspective on Transaction",
|
||||
time: "34m ago",
|
||||
fromStatus: "Ready to Review",
|
||||
toStatus: "Approved",
|
||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
||||
statusColor: "text-green-600"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "The Accrual has been updated to reflect a status of Reject.",
|
||||
author: "Alexander Turner",
|
||||
time: "3h ago",
|
||||
fromStatus: "Ready to Review",
|
||||
toStatus: "Rejected",
|
||||
icon: <FiXCircle className="w-4 h-4" />,
|
||||
statusColor: "text-red-600"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "The Accrual has been revised for accuracy.",
|
||||
author: "Alex Turner",
|
||||
role: "Manager View Transaction State",
|
||||
time: "7d ago",
|
||||
fromStatus: "Rejected",
|
||||
toStatus: "Reviewed",
|
||||
icon: <FiRotateCcw className="w-4 h-4" />,
|
||||
statusColor: "text-yellow-600"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "The Accrual state has been updated from 'ready' to 'under review'.",
|
||||
author: "Alexander Turner",
|
||||
role: "Analyst Perspective on Transaction",
|
||||
time: "34m ago",
|
||||
fromStatus: "Ready to Review",
|
||||
toStatus: "Reviewed",
|
||||
icon: <FiEye className="w-4 h-4" />,
|
||||
statusColor: "text-blue-600"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "The Accrual has been updated from rejected to reviewed.",
|
||||
author: "Alex Turner",
|
||||
role: "Analyst View Transaction",
|
||||
time: "34m ago",
|
||||
fromStatus: "Rejected",
|
||||
toStatus: "Reviewed",
|
||||
icon: <FiRotateCcw className="w-4 h-4" />,
|
||||
statusColor: "text-blue-600"
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
return null;
|
||||
}
|
||||
];
|
||||
|
||||
const auditTrail = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Batch 11317 Pickup Request Created",
|
||||
author: "Sandra Darlington",
|
||||
location: "Lagos General Hospital Gbagada",
|
||||
time: "11 Aug, 2023 09:23 AM",
|
||||
icon: <FiPackage className="w-4 h-4" />,
|
||||
type: "created"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Batch 11317 Pickup Request",
|
||||
author: "Oladejo Israel",
|
||||
location: "Institute of Human Virology H3Africa BioRepository",
|
||||
time: "12 Aug, 2023 11:19 AM",
|
||||
status: "Approved",
|
||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
||||
type: "approved"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Batch 11317 was Initiated",
|
||||
author: "Sandra Darlington",
|
||||
location: "Lagos General Hospital Gbagada",
|
||||
time: "12 Aug, 2023 11:19 AM",
|
||||
icon: <FiFileText className="w-4 h-4" />,
|
||||
type: "initiated"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "Sandra Darlington Assigned batch 11317",
|
||||
assignee: "Yusuf Ahmed",
|
||||
time: "12 Aug, 2023 11:20 AM",
|
||||
icon: <FiUserCheck className="w-4 h-4" />,
|
||||
type: "assigned"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "Batch 11317 was rejected by Yusuf Ahmed",
|
||||
reason: "due to faulty vehicle",
|
||||
time: "12 Aug, 2023 11:20 AM",
|
||||
icon: <FiXCircle className="w-4 h-4" />,
|
||||
type: "rejected"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Sandra Darlington Assigned batch 11317",
|
||||
assignee: "Kolado Jolade",
|
||||
time: "12 Aug, 2023 11:20 AM",
|
||||
icon: <FiUserCheck className="w-4 h-4" />,
|
||||
type: "assigned"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "Logger Synced",
|
||||
deviceId: "ID: LGR-0421",
|
||||
status: "95% remaining",
|
||||
time: "12 Aug, 2023 11:25 AM",
|
||||
icon: <FiCheckCircle className="w-4 h-4" />,
|
||||
type: "synced"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "Logger Disconnected",
|
||||
deviceId: "ID: LGR-0421",
|
||||
time: "12 Aug, 2023 11:25 AM",
|
||||
icon: <FiAlertTriangle className="w-4 h-4" />,
|
||||
type: "disconnected"
|
||||
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)
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
const statusClasses = {
|
||||
'Approved': 'bg-green-100 text-green-800',
|
||||
'Rejected': 'bg-red-100 text-red-800',
|
||||
'Reviewed': 'bg-yellow-100 text-yellow-800',
|
||||
'Ready to Review': 'bg-blue-100 text-blue-800'
|
||||
useEffect(() => {
|
||||
if (accountId && transactionId) {
|
||||
getAuditDetails()
|
||||
}
|
||||
}, [accountId, transactionId])
|
||||
|
||||
|
||||
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 colors = {
|
||||
'created': 'text-blue-600',
|
||||
'approved': 'text-green-600',
|
||||
'initiated': 'text-purple-600',
|
||||
'assigned': 'text-indigo-600',
|
||||
'rejected': 'text-red-600',
|
||||
'synced': 'text-green-600',
|
||||
'disconnected': 'text-orange-600'
|
||||
const getActionColor = (action: string, status: string) => {
|
||||
if (status === 'COMPLETED') return 'text-green-600';
|
||||
if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
|
||||
if (status === 'PENDING') return 'text-yellow-600';
|
||||
|
||||
const colors = {
|
||||
'SENT': 'text-blue-600',
|
||||
'INVITED': 'text-indigo-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 (
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
|
||||
<div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
|
||||
<div className="flex items-center">
|
||||
<h2 className="text-xl font-semibold text-white">
|
||||
Audit Status
|
||||
</h2>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="text-white cursor-pointer transition-colors"
|
||||
>
|
||||
<FiX className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
const getStatusBadge = (status: string) => {
|
||||
const statusClasses = {
|
||||
'SENT': 'bg-blue-100 text-blue-800',
|
||||
'COMPLETED': 'bg-green-100 text-green-800',
|
||||
'FAILED': 'bg-red-100 text-red-800',
|
||||
'PENDING': 'bg-yellow-100 text-yellow-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';
|
||||
};
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-sm text-gray-500 font-medium mb-2">TODAY</div>
|
||||
|
||||
{statusHistory.slice(0, 2).map((item) => (
|
||||
<div key={item.id} className="flex items-start space-x-4 pb-2 border-b border-gray-100 last:border-b-0">
|
||||
<div className={`${item.statusColor} mt-1`}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-gray-800 font-medium text-sm mb-0.5">{item.title}</p>
|
||||
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
|
||||
<span>By {item.author}</span>
|
||||
{item.role && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-blue-600 text-xs">({item.role})</span>
|
||||
</>
|
||||
)}
|
||||
const formatTimestamp = (timestamp: string) => {
|
||||
try {
|
||||
const date = new Date(timestamp);
|
||||
if (isNaN(date.getTime())) {
|
||||
return timestamp;
|
||||
}
|
||||
|
||||
const now = new Date();
|
||||
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));
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
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 className="flex items-center space-x-3">
|
||||
<span className="text-xs text-gray-500">{item.time}</span>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.fromStatus)}`}>
|
||||
{item.fromStatus}
|
||||
</span>
|
||||
<span className="text-gray-400">→</span>
|
||||
<span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.toStatus)}`}>
|
||||
{item.toStatus}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="text-white cursor-pointer transition-colors hover:text-gray-200"
|
||||
>
|
||||
<FiX className="w-5 h-5" />
|
||||
</button>
|
||||
</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>
|
||||
|
||||
{/* 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;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { JSX } from "react";
|
||||
|
||||
export interface DroppedItem {
|
||||
export interface DroppedItemOld {
|
||||
id?: string;
|
||||
icon: JSX.Element;
|
||||
focusElementIndx?: number;
|
||||
|
|
@ -122,4 +122,62 @@ export enum TagsTypes {
|
|||
export enum SignTypeEnum {
|
||||
selfSign = "self_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;
|
||||
}
|
||||
Loading…
Reference in New Issue