From 6ef3e36141a0eb8fa5693f93878f754a18722714 Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Wed, 13 Aug 2025 13:43:31 +0530 Subject: [PATCH 1/2] audit --- .../DocumentCompletionScreen.tsx | 2 +- src/components/transactions/AuditModal.tsx | 528 ++++++++++-------- 2 files changed, 298 insertions(+), 232 deletions(-) diff --git a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx index ce2a410..3ba00f5 100644 --- a/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx +++ b/src/components/process/CompletionScreen/DocumentCompletionScreen.tsx @@ -448,7 +448,7 @@ const DocumentSubmissionOptions = () => { -
+
{/* Left Panel - Configuration */}
diff --git a/src/components/transactions/AuditModal.tsx b/src/components/transactions/AuditModal.tsx index bba20e3..f7dbcb2 100644 --- a/src/components/transactions/AuditModal.tsx +++ b/src/components/transactions/AuditModal.tsx @@ -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 = ({ 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: , - 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" + 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: , - 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" + 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 ", + "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 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 ", + "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 ", + "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': , + 'SENT': , + 'INVITED': , + 'COMPLETED': , + 'RE_SENT_INVITATION': , + 'RE_SENT_EXPIRED_INVITATION': , + 'VIEWED': , + 'VIEWED_IN_PERSON': , // Slightly different eye icon + 'AUTH_FAILED': , + 'ACCESS_CODE_FAILED': , + 'ACCESS_CODE_VALIDATED': , + 'AUTH_VALIDATED': , + 'SIGNED': , + 'EXPIRED': , + 'CANCELLED': , + 'DECLINED': , + 'PENDING': , + 'ASSIGNED': , + 'REASSIGNED': , + 'EDITED': , + }; + + return icons[action as keyof typeof icons] || ; }; - 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 ( -
-
- {/* Header */} -
-
-

- Audit Status -

-
- -
+ 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 */} -
- -
-
TODAY
- - {statusHistory.slice(0, 2).map((item) => ( -
-
- {item.icon} -
-
-

{item.title}

-
- By {item.author} - {item.role && ( - <> - • - ({item.role}) - - )} + 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 ( +
+
+ {/* Header */} +
+
+

+ Audit Status +

-
- {item.time} -
- - {item.fromStatus} - - → - - {item.toStatus} - -
-
-
+
- ))} - + {/* Content */} +
+ {/* {loading ? : ""} */} + {auditStatus.length ? +
+ {/*
TODAY
*/} + {auditStatus.map((item, index) => ( +
+
+ {getActionIcon(item.action)} +
+
+

{item.message}

+ +
+ Action: {item.action} + {extractEmailFromMessage(item.message) && ( + <> + • + {extractEmailFromMessage(item.message)} + + )} +
+ +
+ Status: + {item.status} + + {formatTimestamp(item.timestamp)} + {item.language && ( + {item.language} + )} +
+ + {/* Event Data Details */} + {/*
+ {item.eventData.ip && ( +
+ IP: {item.eventData.ip} +
+ )} + {item.eventData.timezone && ( +
+ Timezone: {item.eventData.timezone} +
+ )} + {item.eventData.latitude && item.eventData.longitude && ( +
+ Location: + Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude} +
+ )} +
*/} +
+
+ ))} +
: +
+ Record Not Found +
+ } +
+ + {/* Footer */} +
+
+ Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''} +
+ +
-
- - {/* Footer */} -
- -
-
-
- ); + ); }; -export default AuditModal; +export default AuditModal; \ No newline at end of file From 8ba1d6c468a44d84efde55b2ad72c08fe5fbe3aa Mon Sep 17 00:00:00 2001 From: JaiPandey425 Date: Thu, 14 Aug 2025 17:34:39 +0530 Subject: [PATCH 2/2] new ui figma --- src/assets/SMELogo.png | Bin 0 -> 3961 bytes src/components/CommonNav.tsx | 8 +- src/components/accounts/Account.tsx | 87 ++++--- .../accounts/TransactionDataTable.tsx | 202 +++++++++++----- src/components/contacts/Contacts.tsx | 59 +++-- src/components/dashboard/Dashboard.tsx | 4 +- src/components/dashboard/NavLink.tsx | 4 +- src/components/dashboard/SendForSign.tsx | 5 +- src/components/dashboard/SideBar.tsx | 33 +-- src/components/home/Cards.tsx | 103 +++----- src/components/home/Home.tsx | 74 +++--- src/components/home/StartNow.tsx | 3 +- src/components/home/StartSection.tsx | 33 +-- .../process/processStepOne/DocumentCard.tsx | 3 +- .../process/processStepOne/ProcessStepOne.tsx | 142 ++++++------ .../processStepOne/RecipientAddCard.tsx | 2 +- .../processStepOne/SelectedDocuments.tsx | 18 +- src/components/setting/AsideSection.tsx | 2 +- src/components/templates/TemplateTable.tsx | 219 ++++++++++++++++++ src/components/templates/Templates.tsx | 178 +------------- src/components/transactions/AuditModal.tsx | 3 +- .../transactions/TransactionView.tsx | 4 +- src/index.css | 19 +- 23 files changed, 673 insertions(+), 532 deletions(-) create mode 100644 src/assets/SMELogo.png create mode 100644 src/components/templates/TemplateTable.tsx diff --git a/src/assets/SMELogo.png b/src/assets/SMELogo.png new file mode 100644 index 0000000000000000000000000000000000000000..85650e3b50fa97f971dd73e4d8a8c115e41e1603 GIT binary patch literal 3961 zcmV-<4~FoGP)MX00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPO zw+!ZC!IwmHa&oeU7e-r-ReSrwKOfrbzbzjRkdW}3U{dGi5so^f-HrWP6J(; z)@hV@HOTn>0}_spwi8^)Q4kJ{sWf?{HMrM{V$}KD>%6_z9H)eYUjm|D&mmzi1V`>x z$RFEV39ke#KLrdei2vzPxBb0qZ**;_gF`pBmo#X^UyAq@xbvg9IdoP6&Et16Kc4d& z?Bt>xE1ZmfJ`i6_FBADUzWo0rutjFjK*I6B^V-q;6%LFkG~2kBf|ptIGExw7Oz%xJCFWPP$Ww}!M)+`T` zet~`c<`LznIljM7a3mXkcIRFxeu4$J(AbLfr3$-H^i2aU`Pw?d!jq{tlMo!jn$o!!XtyY87HA$pLssCq{BsW`a`zqj#*;|}*0;$?BJ(q3XeU7*ffTKL>DZzf)Wy*x*jkjkUxvS%Dd zd8~B?D!sMoCa`ZPH4e?WsjKA~+B-N3`h_FyQpH`0uq#Dl;o)Jc z=;SI~D}Vz0GBKFax#jd?6~U*^+_lL=%9-w21Ru95?8-)4#qrh2c|>~R^WIhup7^19 zS=eZ*@)QyL==4UJN40rX{zV|K%tvU!nHP?0uLT1o7{bQ9hZ(@}98+U7|4_oZS78{c zI1#s0@qLSFKCPSk=mdD!a+<41J~Kxg+1PXOz6hn|cybD|anLOxt}HmUj2v&x@%&~f z4BBCcrcqj#mh!~%GpJMS+eMU>p=6tbyDX&+(_3N0#E&ETdgtnQ1$%(`Tyw+A+v@`i z^B_%6m0db`*qH|$j|w}8$IjxHo{8u0p0qOF!$kjf!}Ep= zbuyzX=<080ld+O*4nz4A?XBRvM)IBFp|%&e^JMCE1qT2NWet5tC)3bWGBwarL_ZbJ z(hF+zK@0eCCZ6wP0IGd-@Rw7@i&iKs&qYK!6UXQAmGS+7eFQXbKINqIv8Asfl$Pm0 zjU_$d0^;D!N6GCY#NiQ!{4^0BjaIq0=`Oi_P>=sXC%a=MgF2pQiW z0u3$ad*z8^_|<$G*)^WDK1CBVifSHg3YQx0dw$Nqk17x@dHP4Z^YOYX2h`c#sdp7j1a+#&DZ?A_ z+=%oU3@h3(7SnEexn<9;|IL}qOith`q zQ<6i;{Dh_lJyUoDKWwyny5%A~xS)pp;?5R5E221F?Jq>wU}f5pRxgs(ykJ3j+Z+}Q ze2Zxt53kNu;s|+cIZf$_W6FCUpyk?v+6p-=AY6ux3X?kqxg&jsV&_AJ$;G4>YTWE`6+`IB%8nSXrPnn!6_Yv|iJe+&t#O#sE&bd@!vN1oo+=?*cu_k4) zQt9P(QjKHfk)!eqv+%bTGA}IjS2)pq7l-ZO!a~#VRa(;49)5Bh*1c}$TkP8D(n8m( zII!>d&+>#RK-Ia??gTLjiZKJN;X~UBB=9v(!xoj+#9_z1^yEk7t}Qf;6Gg~V;Tll)R zq+L4r(eAti>5P)&SPr**$+V?|XYDtU!4%-}Ms7W#7Aib;L!bCtquYVSjOMu`y-XK0 zX}CfPzT{%Yt*0z`Y$af%vT^YBRNg?mDWm(XCr*KO%ZWO^9QhX>ez!QrR)wt`>5X!) z9W)A<0dyO_gufo8@LcGxvInW3M!u8GG=LQKka>j~fb4oE(RmK6rZdi_i>yUuS!d z;(^U_9B=gyY%7I7b>znIhbS5~{z2w=!pi}Ni>zLYH-wOfS^@K&SPFO{ue5!^4lLxY zR6tkW%n_BG2k2Pm%XG$h!jV8zJ(^RWLVvW^&77mZLuPpeGtaVOlYDQlw3h;V43%_Y z?*}gzE_Sa`F(v$7;C5KR0q|EuMh(mW4!`Izc&+p80mK1|2?@U}LS}gmmNUNtsQ5I` z(cWtMM~{Srm&1SHc+j7xRgjR7@L~v=b!@?@Rmc zQ-D?m<3+)*dc7bdC}Kd$h6^kV)IsiRc7J!!BHkkZ#}afJMXw_NgF#a!!zhVPYt#!P4pmJ zVHn|+rs7X=KP@fq$=T+M`0YB_(E48RTsXoC47ki?)&N~?@11CC-Azo zq#t~YBlDEBnQjT=vW(J79Lp@%d)d|_WDW(^xS4oGqnmEb1$5f(SX)?>-@jTDlXeYg z*eg%E3L;@f>^9Bd8+3Z+ZIr(;;_yJ0<og4lBt=jC_+a&jad3olC3;l@wVfPty z0$RfnV6^g71;(b<*8?e>0{nliTtfV@LN=4TfNrWlVLxINMF7-BmVr3$PW=13RNew! z2SU8kbfr-5=(EkwE=x%QXZVxPIzx@kFFMz0?T8{f_cz=8cMqH@(~SyEBg(%j9_2|w ztDtMtF+7~1{mVz9?>k3~8tEJbmc!v(SkHWoix1klG;E8Ghq(? zV{`Lq>v5`b1G{U2|a65dxy zgp@n+>a+fy=HG3Z-n$~O9H@bVH}-#TQUL#bEp&}ox@Q`5gu+PB4gap- zW$^%Z0Z%;(d@{I$oX!|^sG>g3nNL|jmF%2TvyzMT5Nv=KC`Fmp>MEfdMGkGTJPMjL zr}m9d6gFkb*FbolKNmNFDFX3YxdPd;94!O~;-C8Bgv@d>b+6P#nsv!c(DMgN9CN*h z$%OqranxMoNHCf=moL$?#l}kKGpEZ`I+Abn$(&*uqPM~pJQ|+FEGV)pDZYtIe0*lp zaBwm2v#c|lT$u0Yk(!m}BX0#|s!VI>c0U@31k+pK@X$;npS>1+S+?d}Ik^?~^aqS! z+3U8@Fw>&JZUl<|XA|$JUVN57&@3mdxQ3ZHnRaY!EKYH}_ehQ5lS6p1W}8_jaE0m7 ze-QVi`?Abz&zQ5fXo^z#Iu%uD8=n+I!HwdrC*1?u_gzb~jfCC7_9ZW#y?>9Z_p?ke&P z$%oK*-alG+eHswk`=j91);34!nZ_k|WEn;lo-9A%`^nF6Vwnnj1t+m2B>ZkTrf+#d zLc&jk?%c*adNCYfK_(#~0o0tE9Sdm7gXY>VwSP#R`x7K2BqSsxBqSsx{IU2y>WQx6 T(XmwG00000NkvXXu0mjf=+>{` literal 0 HcmV?d00001 diff --git a/src/components/CommonNav.tsx b/src/components/CommonNav.tsx index 38732d7..d9f273c 100644 --- a/src/components/CommonNav.tsx +++ b/src/components/CommonNav.tsx @@ -117,7 +117,7 @@ const CommonNav: React.FC = () => { id: account.userId, name: account.name, email: account.userEmail, - language: "", // set it if available + language: account.language, // set it if available account: { id: account.accountId, isDefault: false, // update as needed @@ -129,7 +129,7 @@ const CommonNav: React.FC = () => { id: account.userId, name: account.name, email: account.userEmail, - language: "", // set it if available + language: account.language, // set it if available account: { id: account.accountId, isDefault: false, // update as needed @@ -154,7 +154,7 @@ const CommonNav: React.FC = () => { id: item?.id, name: item?.firstName + " " + item?.lastName, email: item?.email, - language: "", + language: item?.language, account: { id: item?.account.id, isDefault: false, @@ -263,7 +263,7 @@ const CommonNav: React.FC = () => { ); return ( -
+
+ ) } diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index ff45d09..7471975 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -126,7 +126,7 @@ const Contacts = () => { setShowModal((prev) => !prev); setActionStatus("Add") }} - className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm hover:opacity-90 "> + className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm hover:opacity-90 ">
-
+
- + - - - - + + + + - + {loading ? ( - + ) : contacts.length === 0 ? ( @@ -156,32 +158,40 @@ const Contacts = () => { Record Not Found ) : ( contacts.map((contact, index) => ( - - - - - + + + +
First NameLast NameEmailActionsFirst NameLast NameEmailActions
+ +
{contact.firstName}{contact.lastName}{contact.email} +
{contact.firstName}{contact.lastName}{contact.email}
{openMenuId === contact.id && ( -
+
- {showModal && - - } + + {showModal && ( + + )}
+
); diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx index b35173f..9e821d7 100644 --- a/src/components/dashboard/Dashboard.tsx +++ b/src/components/dashboard/Dashboard.tsx @@ -171,9 +171,9 @@ function Dashboard() { {/* On Top Main Content - START */} -
+
{/* Main Content */} -
+
diff --git a/src/components/dashboard/NavLink.tsx b/src/components/dashboard/NavLink.tsx index 3c05c72..77e033a 100644 --- a/src/components/dashboard/NavLink.tsx +++ b/src/components/dashboard/NavLink.tsx @@ -22,8 +22,10 @@ interface NavLinkProps { // } const NavLink: React.FC = ({ to, icon, label, showSideBar, menuPathMap }) => { + const location = useLocation(); const isActive = menuPathMap[location.pathname] === label; + console.log('Line 26' , to, icon, label, showSideBar, menuPathMap , "Check" , menuPathMap[location.pathname] === label) // const [transactionFilter, setTransationFilter] = useState(TransactionFilterEnum.ALL) @@ -32,7 +34,7 @@ const NavLink: React.FC = ({ to, icon, label, showSideBar, menuPat {icon} diff --git a/src/components/dashboard/SendForSign.tsx b/src/components/dashboard/SendForSign.tsx index 393e883..5ed29db 100644 --- a/src/components/dashboard/SendForSign.tsx +++ b/src/components/dashboard/SendForSign.tsx @@ -12,6 +12,7 @@ import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } f import { SignTypeEnum } from '../../utlity/types'; // import { IoMdArrowDropright } from "react-icons/io"; + interface Props { showSideBar: boolean; } @@ -84,7 +85,7 @@ const SendForSign: React.FC = ({ showSideBar }) => { onBlur={() => setSendForSignDropdown(false)} >
+ className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--sidebarDropDownBg)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}>
handleStartSectionClick(SignTypeEnum.multipleSign)} className={`w-full`}> @@ -98,7 +99,7 @@ const SendForSign: React.FC = ({ showSideBar }) => {
{showSideBar &&

+ className=' border-[var(--sendForSignTextCol)] px-2 py-2'> setSendForSignDropdown(!sendForSignDropdown)} className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} /> diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx index 486c3b1..341a857 100644 --- a/src/components/dashboard/SideBar.tsx +++ b/src/components/dashboard/SideBar.tsx @@ -11,6 +11,7 @@ import { IoSettingsOutline } from "react-icons/io5"; import axios from 'axios'; import { MdManageAccounts } from 'react-icons/md'; import { GrContactInfo, GrTransaction } from 'react-icons/gr'; +import logoSME from '../../assets/SMELogo.png' type SideBarProps = { showSideBar: boolean; @@ -22,11 +23,11 @@ type MenuPathMap = { } const menuPathMap: MenuPathMap = { - '/': 'Home', - '/templates': 'Templates', - '/s/contact': 'Contact', - // '/accounts': 'Accounts', - 'transactions' : "Account" + '/': 'Home', + '/templates': 'Templates', + // '/accounts': 'Accounts', + '/transactions': 'Transactions', + '/contacts': 'Contacts' }; const SideBar: React.FC = ({ showSideBar, setShowSideBar }) => { @@ -53,21 +54,21 @@ const SideBar: React.FC = ({ showSideBar, setShowSideBar }) => { return ( <> {/* Side Bar */} -

+
{/* Menu */}

- {showSideBar ? 'Sign Made Easy' : 'SME'} + {showSideBar ? :

SME

}

- @@ -75,10 +76,10 @@ const SideBar: React.FC = ({ showSideBar, setShowSideBar }) => { {/* SideBar Toggle Button */}
setShowSideBar(!showSideBar)} - className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--highlightBg1)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors' + className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--dashBoardBg)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors' > -
-
+
+
{showSideBar ? ( ) : ( @@ -90,7 +91,7 @@ const SideBar: React.FC = ({ showSideBar, setShowSideBar }) => {
))} -
+
*/}
-
-

Recent Activities

-
+ {/*
*/} + {/*

Recent Activities

*/} +
+
-
+
+ +
+
+ {/* */} diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx index db43178..ee0e2a4 100644 --- a/src/components/process/processStepOne/DocumentCard.tsx +++ b/src/components/process/processStepOne/DocumentCard.tsx @@ -10,6 +10,7 @@ import api from '../../../config/api' import { useParams } from 'react-router-dom' import axios from 'axios' + interface DocumentCardProps { id: string; name: string; @@ -157,7 +158,7 @@ const DocumentCard: React.FC = ({ id, name, isCompleted , tra
) : ( - + )}
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index 0be9217..61c0f90 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/src/components/process/processStepOne/ProcessStepOne.tsx @@ -144,7 +144,7 @@ const ProcessStepOne = () => { documents: false, recipients: false, subject: false, - recipientEmailAndLastName:false + recipientEmailAndLastName: false } if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) { @@ -161,7 +161,7 @@ const ProcessStepOne = () => { if (!isValid) { // alert('All recipients must have both Email and Last Name filled.'); - formError.recipientEmailAndLastName = true; + formError.recipientEmailAndLastName = true; } } if (!emailDtls.subject.length) { @@ -370,10 +370,10 @@ const ProcessStepOne = () => { return ( <> -
+
- {/* Top Navigation */} -
+ {/* Top Navigation - Fixed */} +
{ id="add-tags-btn-step-one" className='flex items-center gap-3'> - {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
- {/* Main Content */} -
+ {/* Main Content - Scrollable */} +
+
- {/* Documents */} -
-

Documents

- -
+ {/* Documents */} +
+

Documents

+ +
- {/* Recipients */} -
- - {!isTamplate && - transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && -
-

Signers

-
- handleSelfSignCb(e)} - id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none" - /> - + {/* Recipients */} +
+

+ {!isTamplate && + transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && +
+

Signers

+
+ handleSelfSignCb(e)} + id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none" + /> + +
-
- } + } - { - (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) && -
+ { + (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) && +
- - {/* {signType !== "self-sign" && } */} + -
+
+ +
-
+ } +
+ {/* Email */} +
+

Email

+ + {/* Subject */} +
+ + setEmailDtls({ ...emailDtls, subject: e.target.value })} + placeholder="Email Subject" + className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]" + />
- } -
- {/* Email */} -
-

Email

- - {/* Subject */} -
- - setEmailDtls({ ...emailDtls, subject: e.target.value })} - placeholder="Email Subject" - className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]" - /> -
- - {/* Message */} -
- -