From 002c8e61105d4b69551e948a15f8a6791a347916 Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Thu, 7 Aug 2025 16:06:32 +0530 Subject: [PATCH 1/4] self_Sign & completion screen navigate to back & without email and lastname show error toast --- src/App.tsx | 1 - .../client/SignCompletionScreen.tsx | 28 ++++++- src/components/client/SignDocument.tsx | 49 ++++++++++-- src/components/contacts/Contacts.tsx | 6 +- .../DocumentCompletionScreen.tsx | 80 ++++++++++++++++++- .../process/processStepOne/ProcessStepOne.tsx | 25 ++++-- .../processStepOne/RecipientAddCard.tsx | 4 +- .../process/processStepOne/RecipientCards.tsx | 78 +++++++++--------- .../process/processStepTwo/NavTwo.tsx | 7 +- .../process/processStepTwo/ProcessStepTwo.tsx | 5 +- src/components/templates/Templates.tsx | 24 +++++- 11 files changed, 242 insertions(+), 65 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0486a18..6a6a7e3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -22,7 +22,6 @@ import Templates from "./components/templates/Templates"; import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen"; import JoyrideController from "./utlity/JoyRideTour"; import Contacts from "./components/contacts/Contacts"; - const App = () => { return ( diff --git a/src/components/client/SignCompletionScreen.tsx b/src/components/client/SignCompletionScreen.tsx index 2038f29..31a2d33 100644 --- a/src/components/client/SignCompletionScreen.tsx +++ b/src/components/client/SignCompletionScreen.tsx @@ -17,6 +17,32 @@ const SignCompletionScreen: React.FC = () => { const [showDownloadModal, setShowDownloadModal] = useState(false); const [animationPhase, setAnimationPhase] = useState(0); + + useEffect(() => { + const currentPath = window.location.pathname; + + const handlePopState = (event) => { + // Show warning + // alert("Back navigation is blocked on this screen."); + + // Push the current URL back to prevent navigating away + window.history.pushState(null, "", currentPath); + }; + + // Push extra states to build history buffer + for (let i = 0; i < 50; i++) { + window.history.pushState(null, "", currentPath); + } + + // Add popstate listener + window.addEventListener("popstate", handlePopState); + + // Cleanup on unmount + return () => { + window.removeEventListener("popstate", handlePopState); + }; + }, []); + useEffect(() => { // Trigger animation phases sequentially const timers = [ @@ -321,7 +347,7 @@ const SignCompletionScreen: React.FC = () => { {/* Additional Info */}

- Your document is signed and ready. You can download it or return to the sign made easy. + Your document is signed and saved. Download it or return to Sign Made Easy to continue — navigation is paused until an action is taken.

diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 3944d11..05cbad2 100644 --- a/src/components/client/SignDocument.tsx +++ b/src/components/client/SignDocument.tsx @@ -161,6 +161,7 @@ const SignDocument = () => { const [stamp, setStamp] = useState({ open: false, blob: "" }); + console.log(recSignStatus, "recSignStatus") // Handling Date Opacity const [dateValues, setDateValues] = useState<{ [key: string]: string }>({}); @@ -261,6 +262,8 @@ const SignDocument = () => { } }, [saved]) + + const handleSignClick = (index: number, id: number) => { setSignTagId(id) if (saved.save) { @@ -305,6 +308,35 @@ const SignDocument = () => { } } + // Step 2: Prevent browser back when status === 'COMPLETED' + // useEffect(() => { + // if (recSignStatus !== "COMPLETED") return; + + // const currentPath = window.location.pathname; + + // const handlePopState = (event) => { + // // Show warning + // alert("Back navigation is blocked on this screen."); + + // // Push the current URL back to prevent navigating away + // window.history.pushState(null, "", currentPath); + // }; + + // // Push extra states to build history buffer + // for (let i = 0; i < 50; i++) { + // window.history.pushState(null, "", currentPath); + // } + + // // Add popstate listener + // window.addEventListener("popstate", handlePopState); + + // // Cleanup on unmount + // return () => { + // window.removeEventListener("popstate", handlePopState); + // }; + // }, [recSignStatus]); + + const fetchData = (isSign: boolean = false) => { axios.get(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, { @@ -315,17 +347,17 @@ const SignDocument = () => { if (res.status === 200) { - setSelectedDocuments(res.data.documents) - setRecipient(res.data.details) - setDroppedItems(res.data.tagJsons) - setTransaction(res.data.transaction) - setRecSignStatus(res.data.status) + setSelectedDocuments(res?.data?.documents) + setRecipient(res?.data?.details) + setDroppedItems(res?.data?.tagJsons) + setTransaction(res?.data?.transaction) + setRecSignStatus(res?.data?.status) - if ("provideOwnTags" in res.data.details && res.data.details.provideOwnTags) { + if ("provideOwnTags" in res?.data?.details && res?.data?.details.provideOwnTags) { setProvideTags(true) } - if (res.data.status === "COMPLETED") { + if (res?.data?.status === "COMPLETED") { setShowCompletionScreen(true) } @@ -337,6 +369,7 @@ const SignDocument = () => { }) .catch((err) => { + console.log(err) }); } @@ -867,6 +900,8 @@ const SignDocument = () => { }; + + // const [showTerms, setShowTerms] = useState(true); return (
diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 655e92e..ff45d09 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -134,7 +134,7 @@ const Contacts = () => {
-
+
@@ -162,7 +162,7 @@ const Contacts = () => { ) : ( - contacts.map((contact) => ( + contacts.map((contact, index) => ( @@ -181,7 +181,7 @@ const Contacts = () => { {openMenuId === contact.id && ( -
+
- - + + {/* Dropdown Trigger + Tooltip */}
{contact.firstName} {contact.lastName}{item.name || 'Untitled'}{formatDate(item.createdAt)}{formatDate(item.lastModifiedAt)}{formatTimestamp(item.createdAt)}{formatTimestamp(item.lastModifiedAt)} handleUseClick(item)}>Use @@ -173,7 +189,7 @@ const Templates = () => { {showMenu === index && (
{ // Ensure it only closes if focus truly leaves the container @@ -183,7 +199,7 @@ const Templates = () => { }} > */} - -
+ {/* Header */} +
+ +
+

🎉 Awesome! The document’s been sent for signature. 🎉

+ {/*
*/} +
+ {/* Left Panel - Configuration */} +
+ {/* Action Selection */} +
+
+

+ Choose an action after a signer completes the document. +

- {(selectedRecipients.length > 0 && selectedDocuments.length > 0) ? -
-
- {/* Header */} -
- {/* Left Section - Document Details */} -
- {/* Document Preview Card */} -
-
- {selectedDocuments?.map((item, index) => ( -
-
-
- {/* */} - document -
-
-

- Name : {item.name ?? '--'} -

-
- Status : {item.status ?? '--'} -
- +
+ {options.map((option) => { + const Icon = option.icon; + const isSelected = selectedOption === option.id; + + return ( +
setSelectedOption(option.id)} + className={` + relative cursor-pointer p-4 rounded-xl border-2 transition-all duration-200 group + ${isSelected + ? 'border-[var(--primary)] bg-blue-50 shadow-md scale-[1.02]' + : option.color + ' border-2' + } + hover:shadow-md hover:scale-[1.01] transform + `} + > +
+
+ +
+
+
+

+ {option.title} +

+ {option.isPremium && ( + ★ + )}
+

+ {option.description} +

- ))} -
-
-
+ {/* Selection indicator */} + {isSelected && ( +
+
+ +
+
+ )} +
+ ); + })}
+
+
- {/* Right Section - Signer Components */} -
- {/* Signing Order Diagram */} - + {/* Custom Image Section */} +
- {/* Signers List */} + {/* Right Panel - Preview */} +
+
+
+

Live Preview

+

See how your users will experience the completion

+
+
+
+ {getPreviewContent()}
- : } +
- +
); }; -export default DocumentCompletionScreen; \ No newline at end of file +export default DocumentSubmissionOptions; \ No newline at end of file From 02bfa840947d77db448aec1a90da833c7e1a39a0 Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Fri, 8 Aug 2025 17:08:18 +0530 Subject: [PATCH 3/4] first-form-docs reset --- src/components/home/StartNow.tsx | 5 ++-- .../DocumentCompletionScreen.tsx | 26 ++++++++--------- .../processStepOne/RecipientAddCard.tsx | 25 ++++++++++++----- .../process/processStepOne/RecipientCards.tsx | 2 +- .../processStepTwo/DocumentContainer.tsx | 3 +- .../setting/Signature/AddSignatureModal.tsx | 28 ++++++++++--------- 6 files changed, 52 insertions(+), 37 deletions(-) diff --git a/src/components/home/StartNow.tsx b/src/components/home/StartNow.tsx index 89217ef..60a5c14 100644 --- a/src/components/home/StartNow.tsx +++ b/src/components/home/StartNow.tsx @@ -1,6 +1,6 @@ import { useRef, useState } from 'react'; import { FiUpload } from 'react-icons/fi' -import { uploadDocuments } from '../../store/slices/documentSlice'; +import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice'; import { useDispatch, useSelector } from 'react-redux'; import { toast } from 'react-toastify'; import { useNavigate } from 'react-router-dom'; @@ -37,7 +37,8 @@ const StartNow = () => { }); }; - const handleFileChange = (e: React.ChangeEvent) => { + const handleFileChange = async (e: React.ChangeEvent) => { + await dispatch(resetDocuments()) const selectedFiles = e.target.files ? Array.from(e.target.files) : []; if (selectedFiles.length > 0) { setFiles((prev) => [...prev, ...selectedFiles]); diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx index 251cbd2..ce2a410 100644 --- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx +++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx @@ -46,7 +46,7 @@ type Signer = { // Signers List Component const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { return ( -
+ //

@@ -58,9 +58,9 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {

-
+
{signers.map((signer) => ( -
+
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
@@ -86,7 +86,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { ))}
-
+ //
); }; @@ -121,10 +121,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => { ) || -1; return ( -
+ //

Signing Flow

-
+
{/* Mail icon */}
@@ -194,7 +194,7 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
-
+ //
); }; const DocumentSubmissionOptions = () => { @@ -387,8 +387,8 @@ const DocumentSubmissionOptions = () => { case 'success': return (
-
- +
+

Document Send Successfully!

@@ -430,22 +430,23 @@ const DocumentSubmissionOptions = () => { } }; + + return (
{/* Header */}
- +

🎉 Awesome! The document’s been sent for signature. 🎉

- {/*
*/}
{/* Left Panel - Configuration */} @@ -457,7 +458,6 @@ const DocumentSubmissionOptions = () => {

Choose an action after a signer completes the document.

-
{options.map((option) => { const Icon = option.icon; diff --git a/src/components/process/processStepOne/RecipientAddCard.tsx b/src/components/process/processStepOne/RecipientAddCard.tsx index cf65bc0..02fd656 100644 --- a/src/components/process/processStepOne/RecipientAddCard.tsx +++ b/src/components/process/processStepOne/RecipientAddCard.tsx @@ -22,11 +22,11 @@ interface ContactType { export interface ContactTypeObj { type: string; contacts: ContactType[]; - setEditRecipientCurrentEmail : any + setEditRecipientCurrentEmail: any } -const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef , setEditRecipientCurrentEmail }) => { +const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => { const [activeAccountId, setActiveAccountId] = useState( JSON.parse(sessionStorage.getItem('activeAccountId') || 'null') ); @@ -113,7 +113,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, hostName: editRecipient.hostName || "", hostEmail: editRecipient.hostEmail || "", roleName: editRecipient.roleName || "", - type: editRecipient.type || recipientType.SIGNER, + type: editRecipient.type, allowSenderToEdit: editRecipient.allowSenderToEdit ?? true, allowSenderToDelete: editRecipient.allowSenderToDelete ?? true, uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''), @@ -210,11 +210,22 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, submitForm(); function submitForm() { - if (editCase === 'Edit') { - dispatch(updateRecipient(recipient)); + let updatedRecipient = { ...recipient }; + + // Clear hostName and hostEmail if type is SIGNER or CC + if ( + updatedRecipient.type === recipientType.SIGNER || + updatedRecipient.type === recipientType.CC + ) { + updatedRecipient.hostName = ""; + updatedRecipient.hostEmail = ""; + } + + if (editCase === "Edit") { + dispatch(updateRecipient(updatedRecipient)); } else { dispatch(addRecipient({ - ...recipient, + ...updatedRecipient, uuid: uuidv4(), newOne: true, })); @@ -580,7 +591,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, type="radio" name="recipient-type" value={option.value} - defaultChecked={option.value === recipientType.SIGNER} + checked={recipient.type === option.value} onClick={(e) => setRecipients({ ...recipient, type: e.target.value })} className="accent-[var(--primary)] cursor-pointer" /> diff --git a/src/components/process/processStepOne/RecipientCards.tsx b/src/components/process/processStepOne/RecipientCards.tsx index 6348b1b..581107b 100644 --- a/src/components/process/processStepOne/RecipientCards.tsx +++ b/src/components/process/processStepOne/RecipientCards.tsx @@ -141,7 +141,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg {recipients.map((recipient, idx) => (
{/* {signingOrder && ( */} diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index 3799711..e472519 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -4,7 +4,7 @@ import { RootState } from '../../../store/store' import api from '../../../config/api'; -import RightSideBar from './rightSideBar/RightSideBar'; +import RightSideBar, { TEXT } from './rightSideBar/RightSideBar'; import { DroppedItem, TagsTypes } from '../../../utlity/types'; import { useNavigate, useParams } from 'react-router-dom'; @@ -241,6 +241,7 @@ const DocumentContainer: React.FC = ({ transactionSaving const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false + const updatedTagData = { "id": "id" in dropTag ? dropTag.id : null, "label": dropTag.label, diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx index 9478964..9a7fb94 100644 --- a/src/components/setting/Signature/AddSignatureModal.tsx +++ b/src/components/setting/Signature/AddSignatureModal.tsx @@ -55,7 +55,7 @@ const AddSignatureModal: React.FC = ({ getAllSignatures, editingSignature }) => { - const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE'); + const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT'); const [fullName, setFullName] = useState(''); const [initials, setInitials] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); @@ -107,7 +107,7 @@ const AddSignatureModal: React.FC = ({ // Navigation items const navigationItems = [ - { id: 'TYPE', label: 'TYPE', icon: }, + { id: 'SELECT', label: 'SELECT', icon: }, { id: 'DRAW', label: 'DRAW', icon: }, { id: 'UPLOAD', label: 'UPLOAD', icon: }, // { id: 'SELECT', label: 'SELECT', icon: }, @@ -118,7 +118,7 @@ const AddSignatureModal: React.FC = ({ if (editingSignature) { setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`); setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`); - setActiveTab(editingSignature.signatureType as 'TYPE' | 'DRAW' | 'UPLOAD'); + setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD'); // Set font for SELECT tab const fontOption = signatureOptions.find(option => option.style === editingSignature.font); @@ -193,10 +193,12 @@ const AddSignatureModal: React.FC = ({ const handleSubmit = async () => { setIsSubmitting(true); - if (!signatures.fullSignature || !signatures.initials) { - alert('Please provide both signature and initials'); - setIsSubmitting(false); - return; + if (activeTab === 'DRAW' || activeTab === 'UPLOAD') { + if (!signatures.fullSignature || !signatures.initials) { + alert('Please provide both signature and initials'); + setIsSubmitting(false); + return; + } } try { @@ -207,7 +209,7 @@ const AddSignatureModal: React.FC = ({ firstName: fullName.split(' ')[0] || user.firstName, lastName: fullName.split(' ')[1] || user.lastName, font: selectedSignature.style, - default:checked + default: checked }; let res; @@ -273,7 +275,7 @@ const AddSignatureModal: React.FC = ({ const renderContent = () => { switch (activeTab) { - case 'TYPE': + case 'SELECT': return (
@@ -481,7 +483,7 @@ const AddSignatureModal: React.FC = ({ {navigationItems.map((item) => (

- {checked - ? 'Signature will be used by default.' - : 'Signature will not be used by default.'} + + Signature will be used by default. +

From b807c0c76871bc3f86b75bdc932e0363affd3a9a Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Tue, 12 Aug 2025 16:16:55 +0530 Subject: [PATCH 4/4] audit-page --- src/components/transactions/AuditModal.tsx | 254 ++++++++++++++++++ .../transactions/TransactionView.tsx | 44 ++- 2 files changed, 294 insertions(+), 4 deletions(-) create mode 100644 src/components/transactions/AuditModal.tsx diff --git a/src/components/transactions/AuditModal.tsx b/src/components/transactions/AuditModal.tsx new file mode 100644 index 0000000..bba20e3 --- /dev/null +++ b/src/components/transactions/AuditModal.tsx @@ -0,0 +1,254 @@ +import React, { useState } from "react"; +import { + FiX, + FiCheckCircle, + FiXCircle, + FiClock, + FiUser, + FiCalendar, + FiFileText, + FiAlertTriangle, + FiTruck, + FiUserCheck, + FiUserX, + FiPackage, + FiMapPin, + FiEye, + FiRotateCcw +} from "react-icons/fi"; + +interface AuditModalProps { + closeModal: () => void; +} + +const AuditModal: React.FC = ({ closeModal }) => { + const [activeTab, setActiveTab] = useState<'status' | 'audit'>('status'); + + const statusHistory = [ + { + id: 1, + title: "The Accrual status has been successfully changed to Approved.", + author: "Alexander Turner", + role: "Analyst Perspective on Transaction", + time: "34m ago", + fromStatus: "Ready to Review", + toStatus: "Approved", + icon: , + 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: , + 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: , + 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: , + 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: , + statusColor: "text-blue-600" + } + ]; + + const auditTrail = [ + { + id: 1, + title: "Batch 11317 Pickup Request Created", + author: "Sandra Darlington", + location: "Lagos General Hospital Gbagada", + time: "11 Aug, 2023 09:23 AM", + icon: , + 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: , + 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: , + type: "initiated" + }, + { + id: 4, + title: "Sandra Darlington Assigned batch 11317", + assignee: "Yusuf Ahmed", + time: "12 Aug, 2023 11:20 AM", + icon: , + 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: , + type: "rejected" + }, + { + id: 6, + title: "Sandra Darlington Assigned batch 11317", + assignee: "Kolado Jolade", + time: "12 Aug, 2023 11:20 AM", + icon: , + type: "assigned" + }, + { + id: 7, + title: "Logger Synced", + deviceId: "ID: LGR-0421", + status: "95% remaining", + time: "12 Aug, 2023 11:25 AM", + icon: , + type: "synced" + }, + { + id: 8, + title: "Logger Disconnected", + deviceId: "ID: LGR-0421", + time: "12 Aug, 2023 11:25 AM", + icon: , + type: "disconnected" + } + ]; + + const getStatusBadge = (status: string) => { + const statusClasses = { + 'Approved': 'bg-green-100 text-green-800', + 'Rejected': 'bg-red-100 text-red-800', + 'Reviewed': 'bg-yellow-100 text-yellow-800', + 'Ready to Review': 'bg-blue-100 text-blue-800' + }; + return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800'; + }; + + const getAuditTypeColor = (type: string) => { + const colors = { + 'created': 'text-blue-600', + 'approved': 'text-green-600', + 'initiated': 'text-purple-600', + 'assigned': 'text-indigo-600', + 'rejected': 'text-red-600', + 'synced': 'text-green-600', + 'disconnected': 'text-orange-600' + }; + return colors[type as keyof typeof colors] || 'text-gray-600'; + }; + + return ( +
+
+ {/* Header */} +
+
+

+ Audit Status +

+
+ +
+ + {/* Content */} +
+ +
+
TODAY
+ + {statusHistory.slice(0, 2).map((item) => ( +
+
+ {item.icon} +
+
+

{item.title}

+
+ By {item.author} + {item.role && ( + <> + • + ({item.role}) + + )} +
+
+ {item.time} +
+ + {item.fromStatus} + + → + + {item.toStatus} + +
+
+
+
+ ))} + + +
+ +
+ + {/* Footer */} +
+ +
+
+
+ ); +}; + +export default AuditModal; diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx index b31dc69..dfb154c 100644 --- a/src/components/transactions/TransactionView.tsx +++ b/src/components/transactions/TransactionView.tsx @@ -1,5 +1,5 @@ import { AiFillSignature } from 'react-icons/ai'; -import { Link, useNavigate, useParams } from 'react-router-dom'; +import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'; import { LuGitGraph } from 'react-icons/lu'; import AccountNav from '../accounts/AccountNav'; import { useEffect, useState } from 'react'; @@ -10,6 +10,7 @@ import { MdEditDocument } from "react-icons/md"; import { useSelector } from 'react-redux'; import { RootState } from '../../store/store'; import { SignTypeEnum } from '../../utlity/types'; +import AuditModal from './AuditModal'; // Sample recipient data — you can replace this with actual API data later const recipients = [ @@ -44,6 +45,35 @@ const TransactionView = () => { const [transactionDetails, setTransactionDetails] = useState(null); const [signingOrderModal, setSigningOrderModal] = useState({ open: false }); const user = useSelector((state: RootState) => state.user) + const location = useLocation(); + const [isModalOpen, setIsModalOpen] = useState(false); + + useEffect(() => { + // update whenever location changes + setIsModalOpen(location.search.includes("auditStatus")); + }, [location]); + + const handleOpenAuditModal = () => { + const { pathname, search } = location; + let newSearch = search + ? search.includes("auditStatus") + ? search + : `${search}&auditStatus` + : "?auditStatus"; + + window.history.pushState({}, "", pathname + newSearch); + setIsModalOpen(true); // ✅ update state immediately + }; + + const closeModal = () => { + let search = location.search + .replace(/[?&]auditStatus\b/, "") + .replace(/^&/, "?") + .replace(/\?$/, ""); + + window.history.pushState({}, "", location.pathname + search); + setIsModalOpen(false); // ✅ update state immediately + }; console.log(transactionDetails, "line 37"); @@ -99,9 +129,13 @@ const TransactionView = () => { More - + {/* Edit - + */} + +
@@ -138,7 +172,7 @@ const TransactionView = () => {
{recipient.email === user.email && recipient.status !== "COMPLETED" &&

handleNavigateToSign(recipient.id)} + onClick={() => handleNavigateToSign(recipient.id)} className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'> Sign

} @@ -207,6 +241,8 @@ const TransactionView = () => {
} + + {isModalOpen && } }