Compare commits
10 Commits
d7dbf906b2
...
c5043cccb1
| Author | SHA1 | Date |
|---|---|---|
 JaiPandey425
|
c5043cccb1 | |
=bhagwanSingh
|
ee6160ff71 | |
|
=bhagwanSingh
|
a496f9d207 | |
|
=bhagwanSingh
|
6981d0fc10 | |
|
=bhagwanSingh
|
69a9ec9fcf | |
|
jaipandey
|
13885abfda | |
|
=bhagwanSingh
|
fbacd2507c | |
|
=bhagwanSingh
|
6abe333501 | |
|
jaipandey
|
467bc0266f | |
Prime5700
|
6be1521cb3 |
|
|
@ -8,6 +8,7 @@ pnpm-debug.log*
|
|||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
node
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck } from "react-icons/fa";
|
||||
import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck, FaBars } from "react-icons/fa";
|
||||
import api from '../config/api';
|
||||
|
||||
|
||||
interface AccountNavProps {
|
||||
accountName?: string | null;
|
||||
transactionName?: string | null;
|
||||
showSideBar?: boolean;
|
||||
setShowSideBar?: (show: boolean) => void;
|
||||
isMobile?: boolean;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
|
|
@ -40,7 +42,11 @@ const dispatchSessionStorageChange = (key: string, newValue: any) => {
|
|||
}));
|
||||
};
|
||||
|
||||
const CommonNav: React.FC<AccountNavProps> = () => {
|
||||
const CommonNav: React.FC<AccountNavProps> = ({
|
||||
showSideBar,
|
||||
setShowSideBar,
|
||||
isMobile = false
|
||||
}) => {
|
||||
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
|
|
@ -112,7 +118,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
dispatchSessionStorageChange('activeAccountId', account.accountId);
|
||||
|
||||
// Update user state
|
||||
|
||||
setUser({
|
||||
id: account.userId,
|
||||
name: account.name,
|
||||
|
|
@ -141,7 +146,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
setOpen(false);
|
||||
};
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getUserDetails = async () => {
|
||||
|
|
@ -173,8 +177,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
|
||||
console.log("Data is saved in sessionStorage");
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
|
|
@ -194,17 +196,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
.split("/")
|
||||
.filter((x) => x && isNaN(Number(x)));
|
||||
|
||||
// Special case: if first segment is 's' and next is 'settings', remove 's'
|
||||
const pathnames =
|
||||
rawPathnames[0] === "s" && rawPathnames[1] === "settings"
|
||||
? rawPathnames.slice(1)
|
||||
: rawPathnames;
|
||||
|
||||
const labelMap: Record<string, string> = {
|
||||
accounts: "Accounts",
|
||||
transactions: "Transactions",
|
||||
templates: "Templates"
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event: MouseEvent) {
|
||||
|
|
@ -244,11 +236,39 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleSidebarToggle = () => {
|
||||
if (setShowSideBar) {
|
||||
setShowSideBar(!showSideBar);
|
||||
}
|
||||
};
|
||||
|
||||
// Special case: if first segment is 's' and next is 'settings', remove 's'
|
||||
const pathnames =
|
||||
rawPathnames[0] === "s" && rawPathnames[1] === "settings"
|
||||
? rawPathnames.slice(1)
|
||||
: rawPathnames;
|
||||
|
||||
const labelMap: Record<string, string> = {
|
||||
accounts: "Accounts",
|
||||
transactions: "Transactions",
|
||||
templates: "Templates",
|
||||
};
|
||||
|
||||
const formatSegment = (segment: string) =>
|
||||
segment
|
||||
.replace(/[-_]/g, " ")
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
|
||||
// If URL has accounts → transactions, only keep "transactions"
|
||||
let filteredPathnames = [...pathnames];
|
||||
const accIndex = pathnames.indexOf("accounts");
|
||||
const txnIndex = pathnames.indexOf("transactions");
|
||||
|
||||
if (accIndex !== -1 && txnIndex !== -1 && txnIndex > accIndex) {
|
||||
// keep only "transactions" and everything after it
|
||||
filteredPathnames = pathnames.slice(txnIndex);
|
||||
}
|
||||
|
||||
const ShimmerRow = () => (
|
||||
<div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
|
||||
<div className="flex items-center space-x-3">
|
||||
|
|
@ -263,34 +283,51 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
);
|
||||
|
||||
return (
|
||||
<header className="w-full px-6 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
|
||||
<nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
|
||||
{pathnames.length === 0 ? (
|
||||
<span className="text-gray-900 font-semibold">Home</span>
|
||||
) : (
|
||||
pathnames.map((segment, index) => {
|
||||
const label = labelMap[segment] || formatSegment(segment);
|
||||
const to = "/" + pathnames.slice(0, index + 1).join("/");
|
||||
const isLast = index === pathnames.length - 1;
|
||||
|
||||
return (
|
||||
<span key={to} className="flex items-center">
|
||||
{index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
|
||||
{!isLast ? (
|
||||
<Link
|
||||
to={to}
|
||||
className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-900 font-semibold">{label}</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
<header className="w-full px-3 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Mobile Hamburger Menu - Only show on mobile */}
|
||||
{isMobile && (
|
||||
<div className='flex items-center justify-start'>
|
||||
<span className='text-[var(--primary)] text-xl text-center tracking-widest font-medium text-shadow-2xs'>SME</span>
|
||||
<button
|
||||
onClick={handleSidebarToggle}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-600 hover:text-gray-900"
|
||||
aria-label="Toggle sidebar"
|
||||
>
|
||||
<FaBars className="text-lg" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Breadcrumb Navigation */}
|
||||
<nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
|
||||
{filteredPathnames.length === 0 ? (
|
||||
<span className="text-gray-900 font-semibold">Home</span>
|
||||
) : (
|
||||
filteredPathnames.map((segment, index) => {
|
||||
const label = labelMap[segment] || formatSegment(segment);
|
||||
const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
|
||||
const isLast = index === filteredPathnames.length - 1;
|
||||
|
||||
return (
|
||||
<span key={to} className="flex items-center">
|
||||
{index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
|
||||
{!isLast ? (
|
||||
<Link
|
||||
to={to}
|
||||
className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-900 font-semibold">{label}</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
|
|
@ -407,6 +444,20 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
// const ShimmerRow = () => (
|
||||
// <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
|
||||
// <div className="flex items-center space-x-3">
|
||||
// <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
|
||||
// <div className="flex-1 space-y-2">
|
||||
// <div className="h-4 bg-gray-200 rounded w-3/4"></div>
|
||||
// <div className="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
// </div>
|
||||
// <div className="w-16 h-6 bg-gray-200 rounded"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
}
|
||||
export default CommonNav;
|
||||
|
|
@ -249,7 +249,7 @@ const Account = () => {
|
|||
<Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
|
||||
isLoading={isLoading} />
|
||||
<section className="my-4 mx-3">
|
||||
<TransactionDataTable />
|
||||
<TransactionDataTable activeAccountId={activeAccountId}/>
|
||||
</section>
|
||||
|
||||
{isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
|
||||
|
|
|
|||
|
|
@ -22,16 +22,13 @@ const statusColorMap = {
|
|||
};
|
||||
|
||||
|
||||
const TransactionDataTable = () => {
|
||||
const TransactionDataTable = ({activeAccountId}) => {
|
||||
const navigate = useNavigate()
|
||||
const loaction = useLocation()
|
||||
console.log("loaction", loaction.pathname);
|
||||
|
||||
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
|
||||
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const fetchTransactions = async () => {
|
||||
|
|
|
|||
|
|
@ -108,6 +108,7 @@ function LoginForm() {
|
|||
.then((res) => {
|
||||
console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
|
||||
if (res.status === 200) {
|
||||
|
||||
toast.dismiss();
|
||||
// console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
|
||||
// Cookies.set("authorization", res.headers.authorization, {
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import SignCompletionScreen from "./SignCompletionScreen";
|
|||
import api from "../../config/api";
|
||||
import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
|
||||
import { RiDragMoveFill } from "react-icons/ri";
|
||||
import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
|
||||
|
||||
|
||||
|
||||
|
|
@ -71,7 +72,7 @@ interface TransactionType {
|
|||
interface TagSubmitData {
|
||||
id: string;
|
||||
type?: string;
|
||||
subType: string;
|
||||
subType?: string;
|
||||
signed: boolean;
|
||||
value: string;
|
||||
}
|
||||
|
|
@ -152,7 +153,7 @@ const SignDocument = () => {
|
|||
const [tagJson, setTagJson] = useState<DroppedItem[] | []>([]);
|
||||
const [transaction, setTransaction] = useState<TransactionType | null>(null);
|
||||
const [recSignStatus, setRecSignStatus] = useState<string | null>(null);
|
||||
const [droppedItems, setDroppedItems] = useState([]);
|
||||
const [droppedItems, setDroppedItems] = useState<DroppedItem[]>([]);
|
||||
const [signTagId, setSignTagId] = useState<number>(0)
|
||||
|
||||
const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
|
||||
|
|
@ -373,8 +374,8 @@ const SignDocument = () => {
|
|||
|
||||
|
||||
|
||||
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const handleFormSubmit = () => {
|
||||
// e.preventDefault();
|
||||
const submitData: TagsSubmitDataObj = {
|
||||
tags: []
|
||||
}
|
||||
|
|
@ -444,7 +445,7 @@ const SignDocument = () => {
|
|||
const tagData: TagSubmitData = {
|
||||
id: tag.id as string,
|
||||
type: tag.type,
|
||||
subType: tag.subType ? tag.subType : "",
|
||||
// subType: tag.subType ? tag.subType : "",
|
||||
signed: true,
|
||||
value: tag.value ? tag.value as string : ""
|
||||
}
|
||||
|
|
@ -612,6 +613,8 @@ const SignDocument = () => {
|
|||
event.preventDefault();
|
||||
|
||||
const data = window.dragElemData;
|
||||
window.dragElemData = null;
|
||||
|
||||
if (!data) return;
|
||||
|
||||
const dragElemData = JSON.parse(data); // Get the dropped label
|
||||
|
|
@ -629,12 +632,40 @@ const SignDocument = () => {
|
|||
const key = `${docId}_${pageIndex}`;
|
||||
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
||||
|
||||
// let prepData = {
|
||||
// properties: data.properties,
|
||||
// icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
// type: dragElemData.label.toUpperCase(),
|
||||
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
// label: dragElemData.label,
|
||||
// dimensions: {
|
||||
// left: x,
|
||||
// top: y,
|
||||
// width: dragElemData.width,
|
||||
// height: dragElemData.height,
|
||||
// },
|
||||
// styles: dragElemData.label === "text" ? {
|
||||
// "font": "Great Vibes",
|
||||
// "italic": false,
|
||||
// "bold": false,
|
||||
// "underline": false,
|
||||
// "color": "black",
|
||||
// "textSize": 14.0
|
||||
// } : null,
|
||||
// documentId: docId,
|
||||
// pageIndex: pageIndex,
|
||||
// recipientId: dragElemData.recipientId,
|
||||
// recipientIndx: dragElemData.recipientIndx,
|
||||
// update: true,
|
||||
// isDeleted: false
|
||||
// }
|
||||
|
||||
let prepData = {
|
||||
properties: data.properties,
|
||||
...data.properties,
|
||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
type: dragElemData.label.toUpperCase(),
|
||||
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
label: dragElemData.label,
|
||||
// subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
dimensions: {
|
||||
left: x,
|
||||
top: y,
|
||||
|
|
@ -653,10 +684,16 @@ const SignDocument = () => {
|
|||
pageIndex: pageIndex,
|
||||
recipientId: dragElemData.recipientId,
|
||||
recipientIndx: dragElemData.recipientIndx,
|
||||
required: (dragElemData.label !== TagsTypes.SIGNATURE && dragElemData.label !== TagsTypes.INITIALS) ? false : true,
|
||||
update: true,
|
||||
isDeleted: false
|
||||
}
|
||||
|
||||
if(prepData.type === "NAME") {
|
||||
prepData.firstName = true
|
||||
prepData.lastName = true
|
||||
}
|
||||
|
||||
if ("group" in dragElemData) {
|
||||
prepData.group = dragElemData.group;
|
||||
prepData.isGroupExist = false;
|
||||
|
|
@ -669,7 +706,7 @@ const SignDocument = () => {
|
|||
// }
|
||||
}
|
||||
|
||||
if (prepData.type === "temporal") {
|
||||
if (prepData.type.toLowerCase() === "temporal") {
|
||||
prepData.currentTimeStamp = true;
|
||||
}
|
||||
|
||||
|
|
@ -811,7 +848,10 @@ const SignDocument = () => {
|
|||
// Updated handleRemoveTag function with your existing API logic and group handling
|
||||
const handleRemoveTag = (key: string, targetIndex: number) => {
|
||||
|
||||
const tag = droppedItems[key][targetIndex];
|
||||
|
||||
console.log("Removing tag:", key, targetIndex, droppedItems);
|
||||
|
||||
const tag: DroppedItem = droppedItems[targetIndex];
|
||||
const recipientId = tag.recipientId;
|
||||
|
||||
console.log(tag, "line 776");
|
||||
|
|
@ -819,7 +859,7 @@ const SignDocument = () => {
|
|||
(async () => {
|
||||
if ("id" in tag) {
|
||||
try {
|
||||
const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
|
||||
const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] })
|
||||
if (response.status !== 200) throw "Tag Deletion error"
|
||||
} catch (err) {
|
||||
return;
|
||||
|
|
@ -887,18 +927,16 @@ const SignDocument = () => {
|
|||
// }, 100);
|
||||
}
|
||||
} else {
|
||||
console.log("Listening to 895")
|
||||
// Handle non-group item removal (your existing logic)
|
||||
setDroppedItems(prevState => ({
|
||||
...prevState,
|
||||
[key]: prevState[key].map((item, index) =>
|
||||
index === targetIndex ? { ...item, isDeleted: true } : item
|
||||
)
|
||||
setDroppedItems(prevState => prevState.filter((item, idx) => {
|
||||
return idx !== targetIndex;
|
||||
}));
|
||||
}
|
||||
})()
|
||||
};
|
||||
|
||||
|
||||
console.log(droppedItems, "droppedItems Line 934")
|
||||
|
||||
|
||||
// const [showTerms, setShowTerms] = useState<boolean>(true);
|
||||
|
|
@ -907,8 +945,8 @@ const SignDocument = () => {
|
|||
<>
|
||||
{/* <TermsModal showTerms={showTerms} setShowTerms={setShowTerms} recipientId={recipientId || ""} /> */}
|
||||
{showCompletionScreen && <SignCompletionScreen />}
|
||||
<form className="bg-slate-100"
|
||||
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
|
||||
<div className="bg-slate-100"
|
||||
// onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleFormSubmit(e)}
|
||||
>
|
||||
{/* Nav Two - Options - START */}
|
||||
<div className='flex justify-between items-center px-4 py-1 bg-white'>
|
||||
|
|
@ -997,6 +1035,7 @@ const SignDocument = () => {
|
|||
// onClick={() => handleFormSubmitBtnClick()}
|
||||
className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
|
||||
<p
|
||||
onClick={handleFormSubmit}
|
||||
id="sign-client-side-btn"
|
||||
className='tracking-wide text-white'>
|
||||
Sign
|
||||
|
|
@ -1046,6 +1085,7 @@ const SignDocument = () => {
|
|||
doc.pages && doc.pages.length > 0 && doc.pages.map((page, indx) => {
|
||||
const key = `${doc.documentId}_${page.index}`;
|
||||
// const tagJsonData = [...droppedItems];
|
||||
// debugger
|
||||
const currDocTags = droppedItems.filter((val) => val.pageIndex === page.index)
|
||||
return (
|
||||
<div
|
||||
|
|
@ -1072,7 +1112,6 @@ const SignDocument = () => {
|
|||
}
|
||||
}
|
||||
key={item.id}
|
||||
// draggable="false"
|
||||
// onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
className="absolute rounded dropped-item text-sm"
|
||||
// onClick={() => handleTagClick(key, index)}
|
||||
|
|
@ -1085,7 +1124,7 @@ const SignDocument = () => {
|
|||
// display: `${hideTags ? 'none' : 'block'}`
|
||||
}}
|
||||
>
|
||||
{provideTags && !transparentTags && !hideTags &&<div
|
||||
{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"
|
||||
|
|
@ -1134,7 +1173,7 @@ const SignDocument = () => {
|
|||
</input> */}
|
||||
|
||||
{
|
||||
!item.multiLine && <p
|
||||
!item.multiLine && !item.maskType && <p
|
||||
// name={item.id}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
onInput={(e) => {
|
||||
|
|
@ -1149,15 +1188,14 @@ const SignDocument = () => {
|
|||
></p>
|
||||
}
|
||||
{
|
||||
item.multiLine && <p
|
||||
item.multiLine && !item.maskType && <p
|
||||
onInput={(e) => {
|
||||
const val = e.currentTarget.textContent;
|
||||
handleTagUpdate(index, val as string);
|
||||
}}
|
||||
contentEditable={true}
|
||||
className="w-full outline-none max-h-max"
|
||||
>
|
||||
</p>
|
||||
></p>
|
||||
}
|
||||
{
|
||||
"maskType" in item && "maskCharacter" in item && item.maskType && <p
|
||||
|
|
@ -1172,7 +1210,7 @@ const SignDocument = () => {
|
|||
// }}
|
||||
onBlur={(e) => {
|
||||
let val = e.target.textContent;
|
||||
if (typeof item.maskType === "string" && typeof val === "string") {
|
||||
if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
|
||||
val = val.replace(/ /g, "");
|
||||
e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
|
||||
}
|
||||
|
|
@ -1227,9 +1265,11 @@ const SignDocument = () => {
|
|||
e.currentTarget.focus(); // Optional: return focus if invalid
|
||||
}
|
||||
}}
|
||||
contentEditable={true}
|
||||
// contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
></p>
|
||||
>
|
||||
{recipient?.email || ""}
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
|
@ -1259,17 +1299,41 @@ const SignDocument = () => {
|
|||
}}
|
||||
|
||||
onBlur={(e) => {
|
||||
|
||||
|
||||
}}
|
||||
contentEditable={true}
|
||||
// contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
></p>
|
||||
>
|
||||
{item.firstName && recipient?.firstName+" " }
|
||||
{item.lastName && recipient?.lastName }
|
||||
|
||||
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{/* NAME FIELD - END */}
|
||||
|
||||
|
||||
{/* NUMBER FIELD - START */}
|
||||
{
|
||||
item.type === "NUMBER" &&
|
||||
<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`}
|
||||
>
|
||||
{
|
||||
<input
|
||||
type="number"
|
||||
className="outline-none h-full max-w-max"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{/* NUMBER FIELD - END */}
|
||||
|
||||
|
||||
|
||||
{/* COMPANY FIELD - START */}
|
||||
{
|
||||
|
|
@ -1294,7 +1358,7 @@ const SignDocument = () => {
|
|||
}}
|
||||
|
||||
onBlur={(e) => {
|
||||
|
||||
|
||||
}}
|
||||
contentEditable={true}
|
||||
className="outline-none whitespace-nowrap w-full max-h-max"
|
||||
|
|
@ -1434,13 +1498,13 @@ const SignDocument = () => {
|
|||
className="outline-none"
|
||||
>
|
||||
<option value="">Select</option>
|
||||
{item.options && item.options.map((val, indx) => {
|
||||
{item.options && item.options.map((obj, indx) => {
|
||||
return (
|
||||
<option
|
||||
key={indx}
|
||||
value={val}
|
||||
value={obj.value}
|
||||
>
|
||||
{val}
|
||||
{obj.label}
|
||||
</option>
|
||||
)
|
||||
})
|
||||
|
|
@ -1465,7 +1529,7 @@ const SignDocument = () => {
|
|||
<p
|
||||
style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
|
||||
className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
|
||||
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.subType?.toLowerCase()}
|
||||
{(item.id && item.id in dateValues) ? dateValues[item.id] : item.dateFormat?.toLowerCase()}
|
||||
</p>
|
||||
<input
|
||||
name={item.id}
|
||||
|
|
@ -1477,7 +1541,7 @@ const SignDocument = () => {
|
|||
let val = e.target.value;
|
||||
|
||||
// Adding dummy time in case of time as it giving Invalid date without that
|
||||
if (item.subType?.toLowerCase() === "time") val = "09/02/2025 " + val
|
||||
if (item.dateFormat?.toLowerCase() === "time") val = "09/02/2025 " + val
|
||||
|
||||
if (!item.id) return;
|
||||
setIsDateOpen(null);
|
||||
|
|
@ -1491,7 +1555,7 @@ const SignDocument = () => {
|
|||
onClick={() => {
|
||||
|
||||
}}
|
||||
type={`${item.subType?.toLowerCase() === "date" ? "date" : (item.subType?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
|
||||
type={`${item.dateFormat?.toLowerCase() === "date" ? "date" : (item.dateFormat?.toLowerCase() === "time" ? "time" : "datetime-local")}`}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
|
@ -1633,7 +1697,7 @@ const SignDocument = () => {
|
|||
{/* Document Container End */}
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</>
|
||||
|
||||
|
||||
|
|
@ -1651,10 +1715,6 @@ const SignDocument = () => {
|
|||
<StampUpload stamp={stamp.blob} setStamp={setStamp} />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <SignatureCon recipientId={recipientId as string} openSign={openSign} setOpenSign={setOpenSign} savedSignature={savedSignature} setSavedSignature={setSavedSignature} />
|
||||
<InitialCon openInitial={openInitial} setOpenInitial={setOpenInitial} savedInitial={savedInitial} setSavedInitial={setSavedInitial} /> */}
|
||||
|
||||
|
|
|
|||
|
|
@ -170,113 +170,71 @@ const ContactFormModal = ({
|
|||
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
|
||||
<div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
|
||||
<div className="ms-2 space-y-2 max-w-[60vw]">
|
||||
<h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-black/30 bg-opacity-50 p-4 sm:p-6">
|
||||
<div className="bg-white rounded-md p-6 max-w-[700px] w-full sm:max-w-[700px] shadow-lg relative overflow-auto max-h-[90vh]">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ label: "First Name", field: "firstName" },
|
||||
{ label: "Last Name", field: "lastName" },
|
||||
{ label: "Email", field: "email", fieldType: "email" },
|
||||
{ label: "Title", field: "title" },
|
||||
{ label: "Company", field: "company" },
|
||||
{ label: "Website", field: "website", fieldType: "url" },
|
||||
{ label: "Phone", field: "phone", fieldType: "tel" },
|
||||
].map(({ label, field, fieldType }) => (
|
||||
<div key={field} className="flex flex-col">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type={fieldType ? fieldType : "text"}
|
||||
value={(formData[field as keyof ContactData] as string) || ""}
|
||||
onChange={(e) =>
|
||||
handleChange(field as keyof ContactData, e.target.value)
|
||||
}
|
||||
required={true}
|
||||
className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
|
||||
placeholder={`Enter ${label}`}
|
||||
/>
|
||||
{errors[field] && (
|
||||
<span className="text-sm text-red-500 mt-1">
|
||||
{errors[field]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ label: "First Name", field: "firstName" },
|
||||
{ label: "Last Name", field: "lastName" },
|
||||
{ label: "Email", field: "email", fieldType: "email" },
|
||||
{ label: "Title", field: "title" },
|
||||
{ label: "Company", field: "company" },
|
||||
{ label: "Website", field: "website", fieldType: "url" },
|
||||
{ label: "Phone", field: "phone", fieldType: "tel" },
|
||||
].map(({ label, field, fieldType }) => (
|
||||
<div key={field} className="flex flex-col">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type={fieldType ?? "text"}
|
||||
value={(formData[field as keyof ContactData] as string) || ""}
|
||||
onChange={(e) =>
|
||||
handleChange(field as keyof ContactData, e.target.value)
|
||||
}
|
||||
required
|
||||
className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
|
||||
placeholder={`Enter ${label}`}
|
||||
/>
|
||||
{errors[field] && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors[field]}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* <div>
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Number</label>
|
||||
<div className="space-y-2">
|
||||
{formData?.phones?.map((phone, index) => (
|
||||
<div key={index} className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={phone}
|
||||
onChange={(e) => handlePhoneChange(index, e.target.value)}
|
||||
className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
|
||||
maxLength={15}
|
||||
placeholder='Enter Phone Numbers'
|
||||
/>
|
||||
{formData.phones.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removePhoneField(index)}
|
||||
className="text-xs text-red-500 hover:underline"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{errors[`phones_${index}`] && (
|
||||
<span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={addPhoneField}
|
||||
className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
|
||||
>
|
||||
+ Add another phone
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowModal((prev) => !prev)}
|
||||
disabled={loading}
|
||||
className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer me-3"
|
||||
>
|
||||
{" "}
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin inline-block mr-2" />
|
||||
SAVING...
|
||||
</>
|
||||
) : (
|
||||
`${actionStatus?.toUpperCase() || "SAVE"} CONTACT`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row justify-end gap-3 mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowModal((prev) => !prev)}
|
||||
disabled={loading}
|
||||
className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin inline-block mr-2" />
|
||||
SAVING...
|
||||
</>
|
||||
) : (
|
||||
`${actionStatus?.toUpperCase() || "SAVE"} CONTACT`
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// Dashboard.jsx - Updated version
|
||||
import React, { useEffect, useLayoutEffect } from 'react'
|
||||
import SideBar from './SideBar'
|
||||
import { Outlet, useNavigate } from 'react-router-dom'
|
||||
|
|
@ -22,6 +23,7 @@ import CommonNav from '../CommonNav'
|
|||
function Dashboard() {
|
||||
const [showSideBar, setShowSideBar] = React.useState(true)
|
||||
const [showConfetti, setShowConfetti] = React.useState(false)
|
||||
const [isMobile, setIsMobile] = React.useState(false)
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
|
|
@ -74,8 +76,6 @@ function Dashboard() {
|
|||
}
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
|
||||
|
||||
|
|
@ -102,35 +102,55 @@ function Dashboard() {
|
|||
dispatch(hideLoader());
|
||||
}, [documentSignType])
|
||||
|
||||
useEffect(() => {
|
||||
if (showConfetti) {
|
||||
const duration = 3000;
|
||||
const end = Date.now() + duration;
|
||||
|
||||
useEffect(() => {
|
||||
if (showConfetti) {
|
||||
const duration = 3000;
|
||||
const end = Date.now() + duration;
|
||||
const interval = setInterval(() => {
|
||||
if (Date.now() > end) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (Date.now() > end) {
|
||||
clearInterval(interval);
|
||||
return;
|
||||
}
|
||||
confetti({
|
||||
particleCount: 80, // more particles
|
||||
angle: Math.random() * 360, // fire in random direction
|
||||
spread: 220, // wider spread
|
||||
startVelocity: 15, // more power
|
||||
scalar: 1.2, // bigger pieces (default is 1)
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
y: Math.random() * 0.6,
|
||||
},
|
||||
zIndex: 9999,
|
||||
});
|
||||
}, 350); // fire every 150ms
|
||||
}
|
||||
}, [showConfetti]);
|
||||
|
||||
confetti({
|
||||
particleCount: 80, // more particles
|
||||
angle: Math.random() * 360, // fire in random direction
|
||||
spread: 220, // wider spread
|
||||
startVelocity: 15, // more power
|
||||
scalar: 1.2, // bigger pieces (default is 1)
|
||||
origin: {
|
||||
x: Math.random(),
|
||||
y: Math.random() * 0.6,
|
||||
},
|
||||
zIndex: 9999,
|
||||
});
|
||||
}, 350); // fire every 150ms
|
||||
useEffect(() => {
|
||||
// Function to handle window resize
|
||||
const handleResize = () => {
|
||||
const mobile = window.innerWidth <= 768;
|
||||
setIsMobile(mobile);
|
||||
|
||||
if (mobile) {
|
||||
setShowSideBar(false); // hide sidebar on mobile by default
|
||||
} else {
|
||||
setShowSideBar(true); // show sidebar on desktop
|
||||
}
|
||||
}, [showConfetti]);
|
||||
};
|
||||
|
||||
// Set sidebar visibility on mount
|
||||
handleResize();
|
||||
|
||||
// Add event listener
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Cleanup listener on unmount
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -165,19 +185,44 @@ function Dashboard() {
|
|||
{
|
||||
user?.authorized &&
|
||||
<div className={`relative`}>
|
||||
{/* Complet DashBoard Back Side SideBar */}
|
||||
{/* Mobile Overlay when sidebar is open */}
|
||||
{isMobile && showSideBar && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/30 bg-opacity-50 z-40"
|
||||
onClick={() => setShowSideBar(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Complete Dashboard Back Side SideBar */}
|
||||
<div className={`relative w-full h-screen overflow-hidden bg-[var(--dashBoardBg)] ${(globalLoader.isLoading || globalModalIsOpen) ? 'pointer-events-none' : ''}`}>
|
||||
|
||||
<SideBar showSideBar={showSideBar} setShowSideBar={setShowSideBar} />
|
||||
<SideBar
|
||||
showSideBar={showSideBar}
|
||||
setShowSideBar={setShowSideBar}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
|
||||
{/* On Top Main Content - START */}
|
||||
<div className={`overflow-y-auto absolute no-scrollbar ${showSideBar ? 'w-[calc(100%-250px)]' : 'w-[calc(100%-60px)]'} h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)] transition-all duration-300`}>
|
||||
<div
|
||||
className={`overflow-y-auto absolute no-scrollbar h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)]`}
|
||||
style={{
|
||||
width: !isMobile
|
||||
? (showSideBar ? 'calc(100% - 250px)' : 'calc(100% - 60px)')
|
||||
: '100%', // Full width on mobile
|
||||
transition: 'width 0.6s ease'
|
||||
}}
|
||||
>
|
||||
{/* Main Content */}
|
||||
<div className=''>
|
||||
<CommonNav />
|
||||
<div>
|
||||
<CommonNav
|
||||
showSideBar={showSideBar}
|
||||
setShowSideBar={setShowSideBar}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* On Top Main Content - END */}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -77,52 +77,97 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
|
|||
// }
|
||||
|
||||
return (
|
||||
<div
|
||||
id='send-for-sign-self-sign-btn'
|
||||
className='relative max-h-max pb-3'
|
||||
<div
|
||||
id='send-for-sign-self-sign-btn'
|
||||
className='relative max-h-max pb-3'
|
||||
tabIndex={0}
|
||||
ref={dropDownRef}
|
||||
onBlur={() => setSendForSignDropdown(false)}
|
||||
>
|
||||
<div
|
||||
{/* <div
|
||||
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]"}`}>
|
||||
<div
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
|
||||
className={`w-full`}>
|
||||
<div
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
|
||||
className={`w-full`}>
|
||||
{
|
||||
showSideBar ?
|
||||
<p
|
||||
className='text-center text-sm'>Send for signature</p>
|
||||
<p
|
||||
className='text-center text-sm'>Send for signature</p>
|
||||
:
|
||||
<IoIosSend className={`pl-2 text-3xl`} />
|
||||
}
|
||||
</div>
|
||||
|
||||
{showSideBar &&
|
||||
<p
|
||||
className=' border-[var(--sendForSignTextCol)] px-2 py-2'>
|
||||
className=' border-[var(--sendForSignTextCol)] pe-2 py-2'>
|
||||
<IoMdArrowDropdown
|
||||
onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
|
||||
className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
|
||||
</p>}
|
||||
</div> */}
|
||||
|
||||
|
||||
<div
|
||||
className={`flex items-center gap-0.5 cursor-pointer text-[var(--sendForSignTextCol)]`}
|
||||
>
|
||||
<div
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
|
||||
className={`
|
||||
flex items-center justify-center
|
||||
bg-[var(--sidebarDropDownBg)]
|
||||
text-center
|
||||
px-2 py-2.5
|
||||
overflow-hidden
|
||||
transition-all duration-300 ease-in-out w-full
|
||||
${showSideBar ? "rounded-l" : "rounded"}
|
||||
`}
|
||||
style={{ whiteSpace: "nowrap" }}
|
||||
>
|
||||
{showSideBar ? (
|
||||
<p className="text-sm select-none">Send for signature</p>
|
||||
) : (
|
||||
<IoIosSend className="text-2xl" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showSideBar && (
|
||||
<div
|
||||
className="rounded-r btn px-2 py-2 bg-[var(--sidebarDropDownBg)] transition-all duration-300 ease-in-out flex items-center justify-center"
|
||||
style={{ opacity: showSideBar ? 1 : 0 }}
|
||||
>
|
||||
<IoMdArrowDropdown
|
||||
onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
|
||||
className={`text-2xl transition-transform duration-150 ${sendForSignDropdown ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Drop Down Box */}
|
||||
{
|
||||
sendForSignDropdown &&
|
||||
<div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
|
||||
<div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
|
||||
<p>Self Sign</p>
|
||||
<p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
|
||||
<div className={`w-[220px] sm:w-[260px] lg:w-[250px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[52px] text-left outline-none`}>
|
||||
<div
|
||||
className='py-2 px-6 leading-5 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}
|
||||
>
|
||||
<p className='text-sm sm:text-base'>Self Sign</p>
|
||||
<p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You're the only signer.</p>
|
||||
</div>
|
||||
<div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
|
||||
<div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
|
||||
<p>Send for Sign</p>
|
||||
<p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
|
||||
<div
|
||||
className='py-2 px-6 leading-5 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
|
||||
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
|
||||
>
|
||||
<p className='text-sm sm:text-base'>Send for Sign</p>
|
||||
<p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You and other need to sign.</p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// SideBar.jsx - Updated version
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import NavLink from './NavLink';
|
||||
|
|
@ -16,6 +17,7 @@ import logoSME from '../../assets/SMELogo.png'
|
|||
type SideBarProps = {
|
||||
showSideBar: boolean;
|
||||
setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
isMobile?: boolean;
|
||||
};
|
||||
|
||||
type MenuPathMap = {
|
||||
|
|
@ -30,7 +32,7 @@ const menuPathMap: MenuPathMap = {
|
|||
'/contacts': 'Contacts'
|
||||
};
|
||||
|
||||
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
||||
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile = false }) => {
|
||||
const location = useLocation();
|
||||
const [showLogoutModal, setShowLogoutModal] = useState(false);
|
||||
|
||||
|
|
@ -54,7 +56,17 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
return (
|
||||
<>
|
||||
{/* Side Bar */}
|
||||
<div className={`relative h-screen ${showSideBar ? 'w-[250px]' : 'w-[60px]'} transition-all duration-300 bg-[var(--sidebarBg)] shadow-md`}>
|
||||
<div className={`
|
||||
${isMobile ? 'fixed left-0 top-0 z-50' : 'relative'}
|
||||
h-screen
|
||||
${isMobile
|
||||
? (showSideBar ? 'w-[250px] translate-x-0' : 'hidden -translate-x-full')
|
||||
: (showSideBar ? 'w-[250px]' : 'w-[60px]')
|
||||
}
|
||||
transition-all duration-600
|
||||
bg-[var(--sidebarBg)]
|
||||
shadow-md
|
||||
`}>
|
||||
{/* Menu */}
|
||||
<div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}>
|
||||
<h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'>
|
||||
|
|
@ -76,10 +88,26 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
{/* SideBar Toggle Button */}
|
||||
<div
|
||||
onClick={() => setShowSideBar(!showSideBar)}
|
||||
className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--dashBoardBg)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
|
||||
className={`
|
||||
absolute top-[95%] translate-y-[-60%]
|
||||
${isMobile
|
||||
? (showSideBar ? 'right-2' : 'right-2')
|
||||
: 'right-0 top-[100%] translate-y-[-100%]'
|
||||
}
|
||||
bg-[var(--dashBoardBg)] p-1
|
||||
${isMobile
|
||||
? 'rounded-md'
|
||||
: (showSideBar ? 'rounded-tl-sm rounded-bl-sm' : 'rounded-tl-sm rounded-bl-sm')
|
||||
}
|
||||
cursor-pointer transition-colors
|
||||
`}
|
||||
>
|
||||
<div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
|
||||
<div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
|
||||
{!isMobile && (
|
||||
<>
|
||||
<div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
|
||||
<div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{showSideBar ? (
|
||||
<BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
|
||||
|
|
@ -113,7 +141,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
{/* Logout Confirmation Modal */}
|
||||
{showLogoutModal && (
|
||||
<div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl p-6 w-80">
|
||||
<div className="bg-white rounded-lg shadow-xl p-4 sm:p-6 w-70 sm:w-40 lg:w-80">
|
||||
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3>
|
||||
<p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
|
|
|
|||
|
|
@ -47,6 +47,9 @@ const cards = [
|
|||
const StartSection = () => {
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch<AppDispatch>()
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
const user = useSelector((state: RootState) => state.user);
|
||||
if (!user.account || user.account === null) {
|
||||
|
|
@ -81,6 +84,35 @@ const StartSection = () => {
|
|||
// }
|
||||
// }, [])
|
||||
|
||||
|
||||
|
||||
// Listen for sessionStorage changes
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === 'activeAccountId') {
|
||||
const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
|
||||
setActiveAccountId(newActiveAccountId);
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for storage events (works for changes from other tabs)
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
// Custom event listener for same-tab changes
|
||||
const handleCustomStorageChange = (e: CustomEvent) => {
|
||||
if (e.detail.key === 'activeAccountId') {
|
||||
setActiveAccountId(e.detail.newValue);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section className="px-3 py-2 w-full mt-2">
|
||||
<h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
|
||||
|
|
@ -95,7 +127,7 @@ const StartSection = () => {
|
|||
{/* Recent Data Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
|
||||
<section className="w-full">
|
||||
<TransactionDataTable />
|
||||
<TransactionDataTable activeAccountId={activeAccountId}/>
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<TemplateTable />
|
||||
|
|
|
|||
|
|
@ -47,8 +47,8 @@ type Signer = {
|
|||
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
||||
return (
|
||||
// <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
|
||||
<div className="p-6 ">
|
||||
<div className="flex items-center justify-evenly mb-2">
|
||||
<div className="p-2 ">
|
||||
<div className="flex items-center justify-evenly mb-1">
|
||||
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
|
||||
<FaUsers className="text-blue-600" />
|
||||
Signature Status
|
||||
|
|
@ -58,7 +58,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-[20vh] overflow-y-auto no-scrollbar">
|
||||
<div className="space-y-3 max-h-[24vh] overflow-y-auto no-scrollbar">
|
||||
{signers.map((signer) => (
|
||||
<div key={signer.id} className="text-xs mx-auto flex items-center gap-4 p-3 w-[70vh] bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
|
|||
|
||||
<div
|
||||
key={id}
|
||||
className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-between"
|
||||
className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-evenly"
|
||||
draggable
|
||||
>
|
||||
<IoMdClose
|
||||
|
|
@ -158,7 +158,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<FaFileAlt className="text-red-600 text-5xl mb-1" />
|
||||
<FaFileAlt className="text-[var(--primary)] text-5xl mb-1" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ const ProcessStepOne = () => {
|
|||
|
||||
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => {
|
||||
const handleNextClick = async (saveAndClose: boolean = false) => {
|
||||
let formError = {
|
||||
documents: false,
|
||||
recipients: false,
|
||||
|
|
@ -298,41 +298,38 @@ const ProcessStepOne = () => {
|
|||
status: "CREATED"
|
||||
})
|
||||
|
||||
if (isSendNow) {
|
||||
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
|
||||
setTimeout(() => {
|
||||
// navigate("/");
|
||||
}, 1000);
|
||||
}
|
||||
else {
|
||||
setTimeout(() => {
|
||||
dispatch(resetDocuments())
|
||||
dispatch(resetRecipients())
|
||||
dispatch(hideLoader());
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
||||
console.log(`/process-step-two/${accountId}/template/${transactionId}`)
|
||||
if (!saveAndClose) {
|
||||
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
|
||||
} else {
|
||||
navigate(`/templates`)
|
||||
// if (isSendNow) {
|
||||
// dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
|
||||
// }
|
||||
// else {
|
||||
// setTimeout(() => {
|
||||
dispatch(resetDocuments())
|
||||
dispatch(resetRecipients())
|
||||
if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
|
||||
dispatch(hideLoader());
|
||||
if (!saveAndClose) {
|
||||
navigate(`/process-step-two/${accountId}/template/${transactionId}`)
|
||||
} else {
|
||||
navigate(`/templates`)
|
||||
}
|
||||
} else {
|
||||
if (signType === SignTypeEnum.selfSign) {
|
||||
dispatch(showLoader("Processing eSignature..."));
|
||||
(async () => {
|
||||
try {
|
||||
await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
dispatch(hideLoader());
|
||||
navigate(`/sign/${recipientId}/self_sign`);
|
||||
} catch (err) {
|
||||
console.log("Error Transaction Sent", err.message);
|
||||
}
|
||||
} else {
|
||||
if (signType === SignTypeEnum.selfSign) {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
|
||||
console.log(res, "Check123");
|
||||
navigate(`/sign/${recipientId}/self_sign`);
|
||||
} catch (err) {
|
||||
console.log("Error Transaction Sent", err.message);
|
||||
}
|
||||
})()
|
||||
} else {
|
||||
navigate(`/process-step-two/${accountId}/${transactionId}`);
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
})()
|
||||
} else {
|
||||
navigate(`/process-step-two/${accountId}/${transactionId}`);
|
||||
}
|
||||
}
|
||||
// }, 1000);
|
||||
// }
|
||||
|
||||
} catch (error) {
|
||||
dispatch(hideLoader());
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
|
|||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
|
||||
<div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl p-6 w-100">
|
||||
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
|
|
|
|||
|
|
@ -96,110 +96,104 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
}
|
||||
}
|
||||
|
||||
// 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")
|
||||
|
||||
let updatedTags = { ...recTags }
|
||||
let tagsData = []
|
||||
// const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
|
||||
for (const dropPageIds of Object.keys(updatedTags)) {
|
||||
// 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,
|
||||
// }
|
||||
|
||||
for (const dropTag of updatedTags[dropPageIds]) {
|
||||
let mask = null
|
||||
// // if ("format" in dropTag) {
|
||||
// // updatedTagData.format = `${dropTag.subType}`.toUpperCase();
|
||||
// // updatedTagData.dateFormat = dropTag.format;
|
||||
// // updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
|
||||
// // }
|
||||
|
||||
// console.log(dropTag, "line 132")
|
||||
// if("format" in dropTag && dropTag.format) {
|
||||
// updatedTagData.subType = dropTag.format.toLowerCase();
|
||||
// updatedTagData.format = dropTag.dateFormat;
|
||||
// }
|
||||
|
||||
// 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.type}`.toLowerCase() === "number") {
|
||||
// updatedTagData.decimalPlace = dropTag.decimalPlace
|
||||
// updatedTagData.isCurrency = dropTag.isCurrency
|
||||
// }
|
||||
|
||||
// console.log(dropTag, "line 204")
|
||||
// if (dropTag.type === "TEXT") {
|
||||
// // updatedTagData.multiLine = dropTag.subType === "paragraph"
|
||||
|
||||
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
// if(dropTag.multiLine) {
|
||||
// updatedTagData.subtype = TEXT.PARAGRAPH
|
||||
// } else {
|
||||
// updatedTagData.subtype = TEXT.SINGLE_LINE
|
||||
// }
|
||||
|
||||
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 ("maskType" in dropTag) {
|
||||
// updatedTagData.maskCharacter = mask.character
|
||||
// updatedTagData.maskType = mask.type
|
||||
// }
|
||||
// }
|
||||
|
||||
// if ("format" in dropTag) {
|
||||
// updatedTagData.format = `${dropTag.subType}`.toUpperCase();
|
||||
// updatedTagData.dateFormat = dropTag.format;
|
||||
// updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
|
||||
// }
|
||||
// // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
|
||||
|
||||
if("format" in dropTag && dropTag.format) {
|
||||
updatedTagData.subType = dropTag.format.toLowerCase();
|
||||
updatedTagData.format = dropTag.dateFormat;
|
||||
}
|
||||
// if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
|
||||
// if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
|
||||
|
||||
if (`${dropTag.type}`.toLowerCase() === "number") {
|
||||
updatedTagData.decimalPlace = dropTag.decimalPlace
|
||||
updatedTagData.isCurrency = dropTag.isCurrency
|
||||
}
|
||||
// if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
|
||||
|
||||
if (dropTag.type === "TEXT") {
|
||||
// updatedTagData.multiLine = dropTag.subType === "paragraph"
|
||||
// if (!updatedTagData.id) delete updatedTagData.id;
|
||||
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
// if (!isDeleted) {
|
||||
// // sendTags.mod.push(updatedTagData);
|
||||
// tagsData.push(updatedTagData)
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
setDroppedItems(recTags)
|
||||
// Handle your response here
|
||||
|
|
@ -261,6 +255,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
}
|
||||
if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
|
||||
delete updateTags[updateTags.length - 1].update
|
||||
delete updateTags[updateTags.length - 1].icon
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -456,7 +451,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
|
|||
|
||||
// HANDLE DROP - START
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
|
||||
console.log("// HANDLE DROP - START")
|
||||
event.preventDefault();
|
||||
|
||||
const data = window.dragElemData;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,79 @@
|
|||
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import { DROPDOWNTOGGLE } from './RightSideBar';
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar';
|
||||
import { DroppedItem, TagsTypes } from '../../../../utlity/types';
|
||||
|
||||
interface CommonAttrDropDownInt {
|
||||
selectedType: any;
|
||||
subType: string | undefined;
|
||||
// subType: string | undefined;
|
||||
selectedTag: DroppedItem;
|
||||
dropDownToggle: DROPDOWNTOGGLE | null;
|
||||
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
|
||||
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
|
||||
console.log("selectedType, subType,",selectedType, subType)
|
||||
let subType = "";
|
||||
let subTypeKey = ""
|
||||
|
||||
console.log(selectedType, selectedTag, "line 20");
|
||||
|
||||
switch (selectedTag.type.toLowerCase()) {
|
||||
case "number":
|
||||
if (selectedTag.decimalPlace === undefined) {
|
||||
subType = NUMBER.INTEGER;
|
||||
subTypeKey = "decimalPlace";
|
||||
} else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
|
||||
subType = NUMBER.CURRENCY;
|
||||
subTypeKey = "isCurrency";
|
||||
} else if (selectedTag.decimalPlace === 0) {
|
||||
subType = NUMBER.INTEGER;
|
||||
subTypeKey = "decimalPlace";
|
||||
} else if (selectedTag.decimalPlace > 0) {
|
||||
subType = NUMBER.DECIMAL;
|
||||
subTypeKey = "decimalPlace";
|
||||
}
|
||||
break;
|
||||
case "text":
|
||||
console.log("Line 444", selectedTag);
|
||||
if (selectedTag.multiLine === undefined) {
|
||||
subType = TEXT.PARAGRAPH
|
||||
} else if (selectedTag.multiLine) {
|
||||
subType = TEXT.PARAGRAPH;
|
||||
} else if (!selectedTag.multiLine) {
|
||||
subType = TEXT.SINGLE_LINE;
|
||||
}
|
||||
|
||||
if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
|
||||
|
||||
subTypeKey = "multiLine";
|
||||
break;
|
||||
case "temporal":
|
||||
if (selectedTag.dateFormat === undefined) {
|
||||
subType = TEMPORAL.DATE;
|
||||
} else {
|
||||
subType = TEMPORAL[selectedTag.dateFormat.toUpperCase() as keyof typeof TEMPORAL];
|
||||
}
|
||||
subTypeKey = "dateFormat";
|
||||
break;
|
||||
case "select":
|
||||
if (selectedTag.multiSelect !== undefined && selectedTag.multiSelect) {
|
||||
subType = SELECT.MULTI_SELECT;
|
||||
} else {
|
||||
subType = SELECT.SINGLE_SELECT;
|
||||
}
|
||||
subTypeKey = "multiSelect";
|
||||
break;
|
||||
case "checkbox":
|
||||
console.log("Date type selected");
|
||||
break;
|
||||
case "radio":
|
||||
console.log("Date type selected");
|
||||
break;
|
||||
}
|
||||
|
||||
console.log(selectedTag, "line 63");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -20,21 +81,98 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subT
|
|||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
|
||||
<p className="capitalize cursor-pointer">{subType}</p>
|
||||
{/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{Object.keys(selectedType).map((val, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
|
||||
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
|
||||
>
|
||||
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
|
||||
</div>
|
||||
))}
|
||||
{Object.keys(selectedType).map((val, indx) => {
|
||||
|
||||
|
||||
console.log(selectedType, val, "Line 90")
|
||||
|
||||
let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
|
||||
let isCurrency = false;
|
||||
let isPassword = false;
|
||||
|
||||
// Handling NUMBER - START
|
||||
if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
|
||||
if (value === NUMBER.CURRENCY) {
|
||||
isCurrency = true;
|
||||
}
|
||||
value = 0;
|
||||
}
|
||||
if (value === NUMBER.DECIMAL) {
|
||||
value = selectedTag.decimalPlace ?? 0 > 0 ? selectedTag.decimalPlace ?? 2 : 2;
|
||||
}
|
||||
// Handling NUMBER - END
|
||||
|
||||
// Handling SELECT - START
|
||||
if (subTypeKey === "multiSelect") {
|
||||
if (value === "multi_select") {
|
||||
value = true;
|
||||
} else {
|
||||
value = false
|
||||
}
|
||||
}
|
||||
// Handling SELECT - END
|
||||
|
||||
// Handling TEXT - START
|
||||
if (subTypeKey === "multiLine") {
|
||||
if (value === "single_line") {
|
||||
value = false;
|
||||
} else {
|
||||
value = true;
|
||||
}
|
||||
|
||||
if (val.toLowerCase() === TEXT.PASSWORD) {
|
||||
isPassword = true;
|
||||
}
|
||||
}
|
||||
// Handling TEXT - END
|
||||
|
||||
console.log(subTypeKey, subType, value, "line 1223");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => {
|
||||
if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
|
||||
if (isCurrency) {
|
||||
handlePropertyChange("isCurrency", true);
|
||||
return;
|
||||
}
|
||||
handlePropertyChange(subTypeKey, value as number);
|
||||
if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)
|
||||
|
||||
} else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
|
||||
|
||||
handlePropertyChange(subTypeKey, value as boolean);
|
||||
|
||||
} else if (selectedTag.type.toLowerCase() === TagsTypes.TEXT) {
|
||||
if (isPassword) {
|
||||
handlePropertyChange("maskType", MASKTYPE.ALL.toUpperCase());
|
||||
handlePropertyChange("maskCharacter", MASKCHARACTER.ASTERISK.toUpperCase());
|
||||
} else {
|
||||
|
||||
handlePropertyChange("maskType", null);
|
||||
handlePropertyChange("maskCharacter", null);
|
||||
|
||||
}
|
||||
handlePropertyChange(subTypeKey, value as boolean);
|
||||
}
|
||||
else {
|
||||
handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
|
||||
}
|
||||
}}
|
||||
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
|
||||
>
|
||||
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
|
|||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
|
||||
onClick={() => handlePropertyChange("maskType", MASKTYPE[val].toUpperCase())}
|
||||
className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{(MASKTYPE[val]).replace("_", " ")}
|
||||
|
|
@ -71,7 +71,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
|
|||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
|
||||
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val].toUpperCase())}
|
||||
className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { DroppedItemsObj } from "../DocumentContainer";
|
|||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
|
||||
import { DroppedItem } from "../../../../utlity/types";
|
||||
import { DroppedItem, StylesInterface } from "../../../../utlity/types";
|
||||
import { IoIosArrowDown } from "react-icons/io";
|
||||
|
||||
import { TagsTypes } from "../../../../utlity/types";
|
||||
|
|
@ -29,7 +29,7 @@ import DirectionalControls from "./DirectionalControls";
|
|||
export interface DroppedItemProps {
|
||||
droppedItems: DroppedItem[]
|
||||
selectedTag: DroppedItem
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> | React.Dispatch<React.SetStateAction<DroppedItem[]>>
|
||||
selTagKey: string,
|
||||
selTagIndx: number,
|
||||
signClient: boolean,
|
||||
|
|
@ -94,7 +94,7 @@ export enum DROPDOWNTOGGLE {
|
|||
DDMMYY_FORMAT
|
||||
}
|
||||
|
||||
const defaultStyles = {
|
||||
const defaultStyles: StylesInterface = {
|
||||
font: "",
|
||||
italic: false,
|
||||
bold: false,
|
||||
|
|
@ -106,163 +106,192 @@ const defaultStyles = {
|
|||
|
||||
|
||||
const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
|
||||
|
||||
console.log("Right SideBar Called", selectedTag, selTagKey, selTagIndx, droppedItems)
|
||||
|
||||
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
||||
const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
|
||||
|
||||
const [styles, setStyles] = useState(defaultStyles);
|
||||
|
||||
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
|
||||
const [decimalPlace, setDecimalPlace] = useState<number>(2)
|
||||
const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0);
|
||||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
|
||||
console.log("changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '' || changeWith === '') return
|
||||
if (changeTo === '') return
|
||||
|
||||
if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
// if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
|
||||
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
|
||||
)
|
||||
: [],
|
||||
// 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
|
||||
|
||||
// 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) {
|
||||
|
||||
// let val = timeFormats[0].format;
|
||||
|
||||
// if (is24Hrs === null) {
|
||||
// val = timeFormats[0].format
|
||||
// } else if (!is24Hrs) {
|
||||
// val = timeFormats[1].format
|
||||
// } else {
|
||||
// val = timeFormats[0].format
|
||||
// }
|
||||
// // console.log("val", val, is24Hrs)
|
||||
|
||||
// // if(is24Hrs === null) {
|
||||
// // changeWith = changeWith + " " + val;
|
||||
// // }
|
||||
|
||||
|
||||
// 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 {
|
||||
|
||||
// if (!signClient) {
|
||||
// setDroppedItems((prev) => {
|
||||
|
||||
// const updatedItems = Array.isArray(prev[selTagKey])
|
||||
// ? prev[selTagKey].map((item, i) =>
|
||||
// i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
// )
|
||||
// : [];
|
||||
|
||||
// return {
|
||||
// ...prev,
|
||||
// [selTagKey]: updatedItems,
|
||||
// };
|
||||
// });
|
||||
// } else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => {
|
||||
|
||||
const updatedItems = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
)
|
||||
: [];
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: updatedItems,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
// setDroppedItems((prev) => {
|
||||
// const updated = [...prev];
|
||||
// updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
// return updated;
|
||||
// })
|
||||
setDroppedItems((prev) => {
|
||||
return (prev.map((item, idx) => {
|
||||
console.log(prev, "Prev lIne 258")
|
||||
if (idx === selTagIndx) {
|
||||
return { ...item, [changeTo]: changeWith, update: true }
|
||||
}
|
||||
));
|
||||
} 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
|
||||
|
||||
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;
|
||||
})
|
||||
}
|
||||
|
||||
return item;
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
|
||||
let val = timeFormats[0].format;
|
||||
|
||||
if (is24Hrs === null) {
|
||||
val = timeFormats[0].format
|
||||
} else if (!is24Hrs) {
|
||||
val = timeFormats[1].format
|
||||
} else {
|
||||
val = timeFormats[0].format
|
||||
}
|
||||
// console.log("val", val, is24Hrs)
|
||||
|
||||
// if(is24Hrs === null) {
|
||||
// changeWith = changeWith + " " + val;
|
||||
// }
|
||||
|
||||
|
||||
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 {
|
||||
|
||||
if (!signClient) {
|
||||
setDroppedItems((prev) => {
|
||||
|
||||
const updatedItems = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
)
|
||||
: [];
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: updatedItems,
|
||||
};
|
||||
});
|
||||
} else {
|
||||
setDroppedItems((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
|
||||
return updated;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
setDropDownToggle(null)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
|
||||
// useEffect(() => {
|
||||
// if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
|
||||
|
||||
if (selectedTag.subType === TEMPORAL.DATE) {
|
||||
handlePropertyChange("format", dateFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
handlePropertyChange("format", dateTimeFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.TIME) {
|
||||
handlePropertyChange("format", timeFormats[0].format)
|
||||
}
|
||||
}
|
||||
}, [selectedTag.subType])
|
||||
// if (selectedTag.dateFormat === TEMPORAL.DATE) {
|
||||
// handlePropertyChange("format", dateFormats[0].format)
|
||||
// }
|
||||
// else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
|
||||
// handlePropertyChange("format", dateTimeFormats[0].format)
|
||||
// }
|
||||
// else if (selectedTag.dateFormat === TEMPORAL.TIME) {
|
||||
// handlePropertyChange("format", timeFormats[0].format)
|
||||
// }
|
||||
// }
|
||||
// }, [selectedTag.dateFormat])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.label === "temporal") {
|
||||
handlePropertyChange("subType", TEMPORAL.DATE);
|
||||
if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
|
||||
handlePropertyChange("dateFormat", TEMPORAL.DATE);
|
||||
handlePropertyChange("format", "DD/MM/YY");
|
||||
}
|
||||
|
||||
if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
|
||||
handlePropertyChange("multiLine", true);
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
|
|
@ -271,6 +300,12 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
handlePropertyChange("decimalPlace", val)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.decimalPlace === undefined) return;
|
||||
if (selectedTag.decimalPlace === decimalPlace) return;
|
||||
setDecimalPlace(selectedTag.decimalPlace ?? 0)
|
||||
}, [selectedTag.decimalPlace ?? 0])
|
||||
|
||||
// useEffect(() => {
|
||||
// if ("styles" in selectedTag) {
|
||||
// console.log("styles" in selectedTag)
|
||||
|
|
@ -300,23 +335,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
}
|
||||
|
||||
// Optional subType logic
|
||||
const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
|
||||
const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
if (
|
||||
selectedTag.type === TagsTypes.TEXT &&
|
||||
selectedTag.subType !== TEXT.PASSWORD &&
|
||||
selectedTag.subType !== TEXT.PARAGRAPH &&
|
||||
tagHeight > fontSize * 2
|
||||
) {
|
||||
handlePropertyChange("subType", TEXT.PARAGRAPH);
|
||||
} else if (
|
||||
selectedTag.subType !== TEXT.PASSWORD &&
|
||||
selectedTag.subType !== TEXT.SINGLE_LINE &&
|
||||
tagHeight <= fontSize * 2
|
||||
) {
|
||||
handlePropertyChange("subType", TEXT.SINGLE_LINE);
|
||||
}
|
||||
// const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
|
||||
// const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
// if (
|
||||
// selectedTag.type === TagsTypes.TEXT &&
|
||||
// selectedTag.subType !== TEXT.PASSWORD &&
|
||||
// selectedTag.subType !== TEXT.PARAGRAPH &&
|
||||
// tagHeight > fontSize * 2
|
||||
// ) {
|
||||
// handlePropertyChange("subType", TEXT.PARAGRAPH);
|
||||
// } else if (
|
||||
// selectedTag.subType !== TEXT.PASSWORD &&
|
||||
// selectedTag.subType !== TEXT.SINGLE_LINE &&
|
||||
// tagHeight <= fontSize * 2
|
||||
// ) {
|
||||
// handlePropertyChange("subType", TEXT.SINGLE_LINE);
|
||||
// }
|
||||
|
||||
}, [selectedTag]);
|
||||
|
||||
const handleStyleChange = (key, value) => {
|
||||
|
|
@ -411,14 +448,14 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
setDroppedItems((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[selTagIndx] = {
|
||||
...item,
|
||||
dimensions: {
|
||||
...item.dimensions,
|
||||
left: clampedLeft,
|
||||
top: clampedTop
|
||||
},
|
||||
update: true
|
||||
}
|
||||
...item,
|
||||
dimensions: {
|
||||
...item.dimensions,
|
||||
left: clampedLeft,
|
||||
top: clampedTop
|
||||
},
|
||||
update: true
|
||||
}
|
||||
return updated
|
||||
})
|
||||
}
|
||||
|
|
@ -433,6 +470,10 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
}
|
||||
|
||||
|
||||
console.log(selectedType, "line 434");
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Right Side Bar Start */}
|
||||
|
|
@ -468,7 +509,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
selectedType && Object.keys(selectedType).length > 0 &&
|
||||
<CommonAttrDropDown
|
||||
selectedType={selectedType}
|
||||
subType={selectedTag.subType}
|
||||
// subType={selectedTag.subType}
|
||||
selectedTag={selectedTag}
|
||||
dropDownToggle={dropDownToggle}
|
||||
setDropDownToggle={setDropDownToggle}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
|
|
@ -476,7 +518,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
|
||||
{/* Mask Type */}
|
||||
{
|
||||
selectedTag?.subType === TEXT.PASSWORD &&
|
||||
selectedTag.maskType && selectedTag.maskType?.length > 0 &&
|
||||
<MaskTypePassAttr
|
||||
maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
|
||||
maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
|
||||
|
|
@ -488,12 +530,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
|
||||
{/* TEMPORAL DATE FORMAT - START */}
|
||||
{
|
||||
(selectedTag?.subType === TEMPORAL.DATE ||
|
||||
selectedTag?.subType === TEMPORAL.TIME ||
|
||||
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
|
||||
selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
|
||||
selectedTag?.dateFormat === TEMPORAL.TIME ||
|
||||
selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
|
||||
<TemporalDateAttr
|
||||
subType={selectedTag.subType}
|
||||
dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
|
||||
format={selectedTag.format}
|
||||
selectedTag={selectedTag}
|
||||
dropDownToggle={dropDownToggle}
|
||||
setDropDownToggle={setDropDownToggle}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
|
|
@ -502,7 +545,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
|
||||
{/* NUMBER - DECIMAL PLACES */}
|
||||
{
|
||||
selectedTag?.subType === NUMBER.DECIMAL &&
|
||||
selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Decimal Places</label>
|
||||
<input
|
||||
|
|
@ -514,9 +557,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
|
|||
}
|
||||
|
||||
{
|
||||
(selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) &&
|
||||
(selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
|
||||
<SelectTagAttr
|
||||
options={selectedTag.options}
|
||||
options={selectedTag.options ?? []}
|
||||
selTagKey={selTagKey}
|
||||
selTagIndx={selTagIndx}
|
||||
setDroppedItems={setDroppedItems}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ import { useState } from "react";
|
|||
import { DROPDOWNTOGGLE } from "./RightSideBar";
|
||||
import { DroppedItemsObj } from "../DocumentContainer";
|
||||
import { IoMdClose } from "react-icons/io";
|
||||
import { TagOptionAttrType } from "../../../../utlity/types";
|
||||
import { DroppedItem } from "../../../../store/slices/droppedItemsSlice";
|
||||
|
||||
interface SelectTagAttrInt {
|
||||
options: string[] | undefined;
|
||||
options: TagOptionAttrType[];
|
||||
selTagKey: string;
|
||||
selTagIndx: number;
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
|
||||
|
|
@ -12,28 +14,43 @@ interface SelectTagAttrInt {
|
|||
}
|
||||
|
||||
const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
|
||||
const [selectedOption, setSelectedOption] = useState<string>()
|
||||
const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({ label: "", value: "" });
|
||||
|
||||
const handleAddSelectOption = () => {
|
||||
if (selectedOption && selectedOption.length) {
|
||||
setDroppedItems((prev) => {
|
||||
console.log("Previous droppedItems:", prev);
|
||||
if (selectedOption && selectedOption.label && selectedOption.value) {
|
||||
|
||||
const newState = {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return {
|
||||
...item,
|
||||
options: item.options ? [...item.options, selectedOption] : [selectedOption],
|
||||
update: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
};
|
||||
|
||||
setDroppedItems((prev) => {
|
||||
let newState: DroppedItem | {} = {};
|
||||
|
||||
if (Array.isArray(prev)) {
|
||||
newState = prev.map((item, indx) => {
|
||||
if (indx === selTagIndx) {
|
||||
return {
|
||||
...item,
|
||||
options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
|
||||
update: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
})
|
||||
} else {
|
||||
newState = {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return {
|
||||
...item,
|
||||
options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
|
||||
update: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
};
|
||||
}
|
||||
|
||||
console.log("New droppedItems state:", newState);
|
||||
return newState;
|
||||
|
|
@ -43,19 +60,35 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
|
||||
|
||||
const handleSelectOptionDel = (indx: number) => {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
setDroppedItems((prev) => {
|
||||
let newState = {};
|
||||
|
||||
|
||||
if (Array.isArray(prev)) {
|
||||
newState = prev.map((item, indx) => {
|
||||
if (indx === selTagIndx) {
|
||||
return {
|
||||
...item, options: item.options ? item.options.filter((_, i) => i !== indx) : []
|
||||
};
|
||||
}
|
||||
return item;
|
||||
})
|
||||
} else {
|
||||
newState = {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
};
|
||||
}
|
||||
));
|
||||
|
||||
return newState
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -64,7 +97,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
<label htmlFor="" className="">Add Options</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => setSelectedOption(e.target.value)}
|
||||
onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
|
||||
// value={selectedOption}
|
||||
onKeyUp={(e) => {
|
||||
if (e.code === "Enter") {
|
||||
|
|
@ -74,13 +107,13 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
|
|||
}}
|
||||
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
||||
|
||||
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
|
||||
<div className="max-h-[150px] mt-1 overflow-hidden overflow-y-auto">
|
||||
{
|
||||
options && options.map((val, indx) => (
|
||||
options && options.map((obj, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
|
||||
<p>{val}</p>
|
||||
<p>{obj.label}</p>
|
||||
<IoMdClose
|
||||
onClick={() =>
|
||||
// setSelectedOptions(prev =>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, y
|
|||
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
|
||||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import dayjs from "dayjs";
|
||||
import { DroppedItem } from "../../../../utlity/types";
|
||||
|
||||
const dateTimeFormatMap = {
|
||||
"date": dateFormats,
|
||||
|
|
@ -14,28 +15,29 @@ const dateTimeFormatMap = {
|
|||
}
|
||||
|
||||
interface TemporalDateAttrInt {
|
||||
subType: string;
|
||||
dateFormat: string;
|
||||
format: string | undefined;
|
||||
selectedTag: DroppedItem;
|
||||
dropDownToggle: DROPDOWNTOGGLE | null;
|
||||
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
|
||||
}
|
||||
|
||||
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
|
||||
console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
|
||||
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
||||
|
||||
const handleIs24HrsClick = (checked: boolean) => {
|
||||
console.log(is24Hrs, checked, "line 30")
|
||||
if (subType === TEMPORAL.TIME) {
|
||||
if (dateFormat === TEMPORAL.TIME) {
|
||||
if (!checked) {
|
||||
handlePropertyChange("format", timeFormats[1].format, is24Hrs)
|
||||
} else {
|
||||
handlePropertyChange("format", timeFormats[0].format, is24Hrs)
|
||||
}
|
||||
}
|
||||
else if (subType === TEMPORAL.DATE_TIME) {
|
||||
else if (dateFormat === TEMPORAL.DATE_TIME) {
|
||||
handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
|
||||
}
|
||||
setIs24Hrs(checked)
|
||||
|
|
@ -53,7 +55,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
|
|||
<div>
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
{(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) &&
|
||||
{(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
checked={is24Hrs ? is24Hrs : false}
|
||||
|
|
@ -72,7 +74,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
|
|||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="cursor-pointer py-1">
|
||||
{format ? format : dateTimeFormatMap['date'][0].format}
|
||||
{/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
||||
{/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
||||
</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
|
@ -80,10 +82,10 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
|
|||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
|
||||
{dateTimeFormatMap[subType].map((valObj, indx) => {
|
||||
{dateTimeFormatMap[dateFormat].map((valObj, indx) => {
|
||||
// let val = showFormatEg ? valObj["example"] : valObj["format"]
|
||||
let val = valObj["format"]
|
||||
if (subType === TEMPORAL.DATE_TIME) {
|
||||
if (dateFormat === TEMPORAL.DATE_TIME) {
|
||||
if (is24Hrs) {
|
||||
val = val + " " + timeFormats[0].format;
|
||||
} else {
|
||||
|
|
@ -94,7 +96,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
|
|||
return (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)}
|
||||
onClick={() => handlePropertyChange("format", val, is24Hrs)}
|
||||
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{val}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import AsideSection from "./AsideSection";
|
|||
import Signature from "./Signature/Signature";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import AccountNav from "../accounts/AccountNav";
|
||||
import ContactForm , {ContactData} from "./ContactForm";
|
||||
import ContactForm, { ContactData } from "./ContactForm";
|
||||
|
||||
// Define the shape of state object
|
||||
interface Account {
|
||||
|
|
@ -392,7 +392,7 @@ const Setting = () => {
|
|||
const handleContactSubmit = async (data: ContactData) => {
|
||||
try {
|
||||
setCreateAndInviteLoader(true);
|
||||
const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
|
||||
const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
|
||||
if (res.status === 200) {
|
||||
toast.success('Contact created successfully!', {
|
||||
position: "top-center",
|
||||
|
|
@ -415,16 +415,16 @@ const Setting = () => {
|
|||
{/* <SettingNav /> */}
|
||||
{/* <AccountNav/> */}
|
||||
<div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
|
||||
{/* Main Navigation Tabs */}
|
||||
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-5">
|
||||
<div className="flex gap-6">
|
||||
{/* Tabs */}
|
||||
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4">
|
||||
<div className="flex flex-wrap gap-4 md:gap-6">
|
||||
{tabs.map((tab) =>
|
||||
tab.type === page1 && (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => handleMainTabClick(tab.id)}
|
||||
className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
|
||||
${activeTab === tab.id
|
||||
${activeTab === tab.id
|
||||
? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600"
|
||||
: "text-gray-600 hover:text-blue-500"
|
||||
}`}
|
||||
|
|
@ -436,11 +436,12 @@ const Setting = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content with Aside Navigation */}
|
||||
<div className="flex mt-3 px-8 flex-1 min-h-0">
|
||||
{/* Fixed Aside Navigation - Shows subsections of active tab */}
|
||||
{activeTab === 'userProfile' &&
|
||||
<section className="flex-shrink-0 mr-6 w-50 relative">
|
||||
{/* Responsive Layout */}
|
||||
<div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-8 mt-3 gap-6">
|
||||
|
||||
{/* Sidebar (hidden on small, shown on lg) */}
|
||||
{activeTab === 'userProfile' && (
|
||||
<section className="hidden lg:block flex-shrink-0 w-56">
|
||||
<div className="sticky top-6 z-20">
|
||||
<AsideSection
|
||||
activeSubSection={activeSubSection}
|
||||
|
|
@ -450,8 +451,28 @@ const Setting = () => {
|
|||
/>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
{/* Scrollable Main Content */}
|
||||
)}
|
||||
|
||||
{/* Sidebar as horizontal nav (only on mobile) */}
|
||||
{activeTab === 'userProfile' && (
|
||||
<section className="lg:hidden mb-4">
|
||||
<div className="flex overflow-x-auto no-scrollbar gap-4 border-b pb-2">
|
||||
{getSubSections(activeTab).map((sub) => (
|
||||
<button
|
||||
key={sub.id}
|
||||
onClick={() => handleSubSectionClick(sub.id)}
|
||||
className={`whitespace-nowrap text-sm font-medium px-2 py-1 rounded-md
|
||||
${activeSubSection === sub.id ? "bg-blue-100 text-blue-600" : "text-gray-600"}
|
||||
`}
|
||||
>
|
||||
{sub.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="flex-1 min-w-0 overflow-y-auto no-scrollbar"
|
||||
|
|
@ -460,6 +481,7 @@ const Setting = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
getAllSignatures,
|
||||
editingSignature
|
||||
}) => {
|
||||
console.log("editingSignature", editingSignature)
|
||||
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
|
|
@ -81,6 +82,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
console.log("selectedSignature", selectedSignature)
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
|
@ -107,10 +110,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
// Navigation items
|
||||
const navigationItems = [
|
||||
{ id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
|
||||
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
|
||||
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
|
||||
{ id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-3 h-3 md:w-4 md:h-4" /> },
|
||||
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-3 h-3 md:w-4 md:h-4" /> },
|
||||
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-3 h-3 md:w-4 md:h-4" /> },
|
||||
];
|
||||
|
||||
// Initialize form with editing signature data
|
||||
|
|
@ -193,25 +195,43 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (activeTab === 'DRAW' || activeTab === 'UPLOAD') {
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
// Only validate for DRAW and UPLOAD
|
||||
if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') &&
|
||||
(!signatures.fullSignature || !signatures.initials)) {
|
||||
// alert('Please provide both signature and initials');
|
||||
toast.error('Please provide both signature and initials in draw and upload case', {
|
||||
position: "top-center",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Base payload
|
||||
const payload = {
|
||||
signatureType: activeTab,
|
||||
signatureBase64: signatures.fullSignature,
|
||||
initialsBase64: signatures.initials,
|
||||
firstName: fullName.split(' ')[0] || user.firstName,
|
||||
lastName: fullName.split(' ')[1] || user.lastName,
|
||||
font: selectedSignature.style,
|
||||
default: checked
|
||||
};
|
||||
|
||||
// Only add signatures if not SELECT
|
||||
if (activeTab !== 'SELECT') {
|
||||
payload.signatureBase64 = signatures.fullSignature;
|
||||
payload.initialsBase64 = signatures.initials;
|
||||
}
|
||||
|
||||
console.log("payload214", payload);
|
||||
|
||||
let res;
|
||||
if (isEditMode && editingSignature) {
|
||||
// Update existing signature
|
||||
|
|
@ -273,32 +293,57 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
// Fixed renderContent function for SELECT case with proper radio button styling
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'SELECT':
|
||||
return (
|
||||
<div className="h-full flex flex-col ">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Choose Signature Style</h2>
|
||||
<p className="text-sm text-gray-600">Select from pre-designed signature styles</p>
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="mb-1 md:mb-4 lg:mb-6 flex-shrink-0">
|
||||
<h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Choose Signature Style</h2>
|
||||
<p className="text-xs md:text-sm text-gray-600 hidden md:block">Select from pre-designed signature styles</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-4">
|
||||
<div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
|
||||
<div className="space-y-2 md:space-y-3 pb-2">
|
||||
{signatureOptions.map((option) => (
|
||||
<div key={option.id} className="flex items-center space-x-4 px-2 py-1 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<div
|
||||
key={option.id}
|
||||
className={`flex items-center space-x-2 md:space-x-3 p-2 md:p-3 border rounded-lg transition-all duration-200 cursor-pointer ${selectedSignature.id === option.id
|
||||
? 'border-gray-100 shadow-sm'
|
||||
: 'border-gray-200 hover:bg-gray-50 hover:border-gray-300'
|
||||
}`}
|
||||
onClick={() => setSelectedSignature({ id: option.id, style: option.style })}
|
||||
>
|
||||
{/* Custom Radio Button */}
|
||||
<div className="flex-shrink-0">
|
||||
<div
|
||||
className={`w-4 h-4 md:w-3 md:h-3 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${selectedSignature.id === option.id
|
||||
? 'border-gray-300 bg-blue-600'
|
||||
: 'border-gray-300 bg-white hover:border-gray-400'
|
||||
}`}
|
||||
>
|
||||
{selectedSignature.id === option.id && (
|
||||
<div className="w-2 h-2 md:w-3 md:h-2 rounded-full bg-blue-500"></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Hidden native radio button for accessibility */}
|
||||
<input
|
||||
type="radio"
|
||||
id={`signature-${option.id}`}
|
||||
name="signature"
|
||||
checked={selectedSignature.id === option.id}
|
||||
onChange={() => setSelectedSignature({ id: option.id, style: option.style })}
|
||||
className="w-4 h-4 text-blue-600 focus:ring-blue-500"
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className="flex-1 grid grid-cols-2 gap-2">
|
||||
<div className=" border-gray-300 rounded-lg px-2 py-1 bg-white ">
|
||||
<div className="text-xs text-gray-500 mb-2">Signed by:</div>
|
||||
<div className={`text-lg ${option.style === 'cursive' ? 'font-serif italic' :
|
||||
|
||||
<div className="flex-1 min-w-0 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
|
||||
<div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
|
||||
<div className="text-xs text-gray-500 mb-1">Signed by:</div>
|
||||
<div className={`text-sm md:text-base truncate ${option.style === 'cursive' ? 'font-serif italic' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
|
|
@ -306,13 +351,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
}`}>
|
||||
{fullName || option.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-2">
|
||||
<div className="text-xs text-gray-400 mt-1 truncate">
|
||||
dca3e646-62cd-4cc...
|
||||
</div>
|
||||
</div>
|
||||
<div className=" rounded-lg px-2 py-2 bg-white ">
|
||||
<div className="text-xs text-gray-500 mb-2">DS</div>
|
||||
<div className={`text-2xl ${option.style === 'cursive' ? 'font-serif italic' :
|
||||
<div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
|
||||
<div className="text-xs text-gray-500 mb-1">DS</div>
|
||||
<div className={`text-lg md:text-xl truncate ${option.style === 'cursive' ? 'font-serif italic' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
|
|
@ -331,79 +376,73 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
|
||||
case 'DRAW':
|
||||
return (
|
||||
<DrawSignatureCanvas
|
||||
onSignatureChange={handleSignatureChange}
|
||||
initialSignatures={isEditMode ? signatures : undefined}
|
||||
/>
|
||||
<div className="h-full">
|
||||
<DrawSignatureCanvas
|
||||
onSignatureChange={handleSignatureChange}
|
||||
initialSignatures={isEditMode ? signatures : undefined}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'UPLOAD':
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Upload Signature</h2>
|
||||
<div className="mb-3 md:mb-4 lg:mb-6 flex-shrink-0">
|
||||
<h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Upload Signature</h2>
|
||||
<p className="text-xs md:text-sm text-gray-600 hidden md:block">Upload your signature images</p>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div>
|
||||
<div className="grid grid-cols-12 gap-6">
|
||||
{/* Upload 1 */}
|
||||
<div className="col-span-8">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
|
||||
<label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview1 ? (
|
||||
<img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" />
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<MdCloudUpload className="mx-auto h-12 w-12 text-gray-400 mb-3" />
|
||||
<p className="text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
|
||||
<p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id="upload1"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-4 pb-2">
|
||||
{/* Upload 1 - Full Signature */}
|
||||
<div className="lg:col-span-8">
|
||||
<label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
|
||||
<label htmlFor="upload1" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview1 ? (
|
||||
<img src={preview1} alt="Signature Preview" className="max-h-full max-w-full object-contain p-2" />
|
||||
) : (
|
||||
<div className="text-center px-4">
|
||||
<MdCloudUpload className="mx-auto h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10 text-gray-400 mb-2" />
|
||||
<p className="text-xs md:text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
|
||||
<p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id="upload1"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Upload 2 */}
|
||||
<div className="col-span-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
|
||||
<label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview2 ? (
|
||||
<img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" />
|
||||
) : (
|
||||
<div className="text-center">
|
||||
<MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
|
||||
<p className="text-xs text-gray-500">Upload initials</p>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id="upload2"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
|
||||
/>
|
||||
</div>
|
||||
{/* Upload 2 - Initials */}
|
||||
<div className="lg:col-span-4">
|
||||
<label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Initials</label>
|
||||
<label htmlFor="upload2" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
|
||||
{preview2 ? (
|
||||
<img src={preview2} alt="Initials Preview" className="max-h-full max-w-full object-contain p-2" />
|
||||
) : (
|
||||
<div className="text-center px-2">
|
||||
<MdCloudUpload className="mx-auto h-5 w-5 md:h-6 md:w-6 lg:h-8 lg:w-8 text-gray-400 mb-2" />
|
||||
<p className="text-xs md:text-sm text-gray-500 mb-1">Upload initials</p>
|
||||
<p className="text-xs text-gray-400 hidden md:block">PNG, JPG, GIF</p>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id="upload2"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// case 'SELECT':
|
||||
// return (
|
||||
// <div className="h-full flex flex-col">
|
||||
// <div className="mb-6">
|
||||
// <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -430,25 +469,147 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
getUserDetails();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
<div className="w-64 bg-gray-50 rounded-l-lg border-r border-gray-200 flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-4 border-b border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className='px-1 py-1'>
|
||||
<h3 className="text-md font-semibold text-gray-900">Add Signature </h3>
|
||||
<p className="text-xs text-gray-500">Create your digital signature</p>
|
||||
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-2 md:p-4">
|
||||
<div className="bg-white rounded-md shadow-xl w-full h-full md:max-w-[95vw] lg:max-w-[85vw] xl:max-w-[80vw] md:max-h-[95vh] lg:max-h-[90vh] flex flex-col md:flex-row relative overflow-hidden ">
|
||||
|
||||
{/* Mobile Navigation - Fixed at top on mobile only */}
|
||||
<div className="md:hidden flex-1 flex flex-col min-h-0">
|
||||
|
||||
{/* Scrollable area (mobile: inputs + nav + content) */}
|
||||
<div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
|
||||
<div className="px-3 lg:px-6 py-2 border-b border-gray-200 flex-shrink-0">
|
||||
<h3 className="text-sm font-semibold text-gray-900">
|
||||
{isEditMode ? 'Edit Signature' : 'Add Signature'}
|
||||
</h3>
|
||||
</div>
|
||||
{/* Mobile Inputs */}
|
||||
<div className="md:hidden w-full bg-white border-b border-gray-200 flex-shrink-0 px-3 py-2">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className='col-span-2'>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
placeholder="Enter full name"
|
||||
className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className='col-span-1'>
|
||||
<label className="block text-xs font-medium text-gray-700 mb-1">
|
||||
Initials
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={initials}
|
||||
onChange={(e) => setInitials(e.target.value)}
|
||||
placeholder="Enter initials"
|
||||
className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation - Sticky inside scroll */}
|
||||
<div className="md:hidden w-full bg-gray-50 border-b border-gray-200 sticky top-0 z-20">
|
||||
<div className="px-3 py-1.5">
|
||||
<nav className="flex gap-1">
|
||||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
|
||||
className={`flex-1 flex items-center justify-center space-x-1 px-2 py-2 text-xs font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="hidden sm:block">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="md:hidden p-3 md:p-4 lg:py-5 lg:px-5">
|
||||
<div className="h-full min-h-[300px] md:min-h-[400px]">
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Inputs */}
|
||||
<div className="px-6 py-2.5 border-b border-gray-200">
|
||||
<div className="space-y-2">
|
||||
{/* Checkbox - Fixed */}
|
||||
<div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
|
||||
<label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={toggleCheckbox}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div
|
||||
className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked
|
||||
? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]'
|
||||
: 'bg-white border-gray-400 hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
{checked && <FiCheck className="text-white text-xs" />}
|
||||
</div>
|
||||
<span>Signature will be used by default</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons - Fixed */}
|
||||
<div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
|
||||
<button
|
||||
className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
|
||||
<span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
|
||||
</>
|
||||
) : (
|
||||
<span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Desktop Sidebar Navigation */}
|
||||
<div className="hidden md:flex md:w-64 lg:w-72 xl:w-80 bg-gray-50 md:border-r border-gray-200 flex-col">
|
||||
{/* Header - Fixed */}
|
||||
<div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
|
||||
<h3 className="text-base lg:text-lg font-semibold text-gray-900">
|
||||
{isEditMode ? 'Edit Signature' : 'Add Signature'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{isEditMode ? 'Update your digital signature' : 'Create your digital signature'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form Inputs - Fixed */}
|
||||
<div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name
|
||||
|
|
@ -458,10 +619,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
value={fullName}
|
||||
onChange={(e) => setFullName(e.target.value)}
|
||||
placeholder="Enter full name"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Initials
|
||||
|
|
@ -471,109 +631,94 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
value={initials}
|
||||
onChange={(e) => setInitials(e.target.value)}
|
||||
placeholder="Enter initials"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Menu */}
|
||||
<div className="flex-1 px-6 py-2.5">
|
||||
<nav className="space-y-2">
|
||||
{/* Navigation Menu - Fixed */}
|
||||
<div className="px-4 lg:px-6 py-4 flex-shrink-0">
|
||||
<nav className="flex flex-col gap-2">
|
||||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
|
||||
className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200'
|
||||
className={`w-full flex items-center justify-start space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
|
||||
? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
|
||||
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
<span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
|
||||
{item.icon}
|
||||
</span>
|
||||
|
||||
<span>{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Spacer for desktop */}
|
||||
<div className="flex-1"></div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex flex-col ">
|
||||
{/* Header with close button */}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 py-5 px-5 overflow-hidden ">
|
||||
{/* <button
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
className="absolute top-2 right-3 p-2 hover:bg-gray-100 rounded-full transition-colors z-20"
|
||||
>
|
||||
<AiOutlineClose className="w-5 h-5 text-gray-500" />
|
||||
</button> */}
|
||||
{renderContent()}
|
||||
<div className="hidden flex-1 md:flex flex-col min-h-0">
|
||||
{/* Content - Scrollable */}
|
||||
<div className="flex-1 min-h-0 p-3 md:p-4 lg:py-5 lg:px-5 overflow-y-auto no-scrollbar">
|
||||
<div className="h-full min-h-[300px] md:min-h-[400px]">
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right px-6 py-1 text-white">
|
||||
<label className="inline-flex items-center cursor-pointer group">
|
||||
|
||||
{/* Checkbox - Fixed */}
|
||||
<div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
|
||||
<label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={toggleCheckbox}
|
||||
className="sr-only"
|
||||
/>
|
||||
|
||||
{/* Custom checkbox UI */}
|
||||
<div
|
||||
className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
|
||||
${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
|
||||
`}
|
||||
className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]' : 'bg-white border-gray-400 hover:border-gray-500'
|
||||
}`}
|
||||
>
|
||||
{checked && (
|
||||
<FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
|
||||
)}
|
||||
{checked && <FiCheck className="text-white text-xs" />}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-gray-700 opacity-80 ms-1">
|
||||
|
||||
Signature will be used by default.
|
||||
|
||||
</p>
|
||||
<span>Signature will be used by default</span>
|
||||
</label>
|
||||
|
||||
{/* Caption text below */}
|
||||
</div>
|
||||
|
||||
{/* Footer Buttons in Main Area */}
|
||||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
{/* Footer Buttons - Fixed */}
|
||||
<div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin" />
|
||||
{isEditMode ? 'UPDATING...' : 'CREATING...'}
|
||||
<FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
|
||||
<span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
|
||||
</>
|
||||
) : (
|
||||
isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
|
||||
<span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default AddSignatureModal;
|
||||
|
|
@ -224,20 +224,20 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
|
|||
|
||||
return (
|
||||
<div className="h-full flex flex-col">
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-2">Draw Signature</h2>
|
||||
<p className="text-sm text-gray-600">Create your signature by drawing directly on the canvas</p>
|
||||
<div className="mb-2 lg:mb-6">
|
||||
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mb-1 sm:mb-2 ">Draw Signature</h2>
|
||||
<p className="text-xs sm:text-sm text-gray-600 hidden sm:block">Create your signature by drawing directly on the canvas</p>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-12 gap-6 mb-2">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
|
||||
{/* Full Signature Canvas */}
|
||||
<div className="col-span-8">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
|
||||
<div className="lg:col-span-8">
|
||||
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
|
||||
<canvas
|
||||
ref={canvasRef1}
|
||||
className="w-full h-48 cursor-crosshair"
|
||||
className="w-full h-51 cursor-crosshair"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
|
|
@ -247,12 +247,12 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
|
|||
</div>
|
||||
|
||||
{/* Initials Canvas */}
|
||||
<div className="col-span-4">
|
||||
<div className="lg:col-span-4">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
|
||||
<div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
|
||||
<canvas
|
||||
ref={canvasRef2}
|
||||
className="w-full h-48 cursor-crosshair"
|
||||
className="w-full h-51 cursor-crosshair"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
|
|
@ -263,7 +263,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
|
|||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-4">
|
||||
<div className="flex gap-4 mt-3">
|
||||
<button
|
||||
className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
onClick={clearCanvas}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ interface Signature {
|
|||
signatureBlob: string;
|
||||
signatureStampedBlob: string;
|
||||
default: boolean;
|
||||
signatureMimeType:string;
|
||||
initialsMimeType:string
|
||||
signatureMimeType: string;
|
||||
initialsMimeType: string
|
||||
}
|
||||
|
||||
const SignatureManager: React.FC = () => {
|
||||
|
|
@ -30,6 +30,15 @@ const SignatureManager: React.FC = () => {
|
|||
const [showAddSignature, setShowAddSignature] = useState<boolean>(false);
|
||||
const [editingSignature, setEditingSignature] = useState<Signature | null>(null);
|
||||
|
||||
const signatureOptions = [
|
||||
{ id: 1, name: 'print', initials: 'LA', style: 'print' },
|
||||
{ id: 2, name: 'cursive', initials: 'LA', style: 'cursive' },
|
||||
{ id: 3, name: 'script', initials: 'LA', style: 'script' },
|
||||
{ id: 4, name: 'elegant', initials: 'LA', style: 'elegant' },
|
||||
{ id: 5, name: 'modern', initials: 'LA', style: 'modern' },
|
||||
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
|
||||
];
|
||||
|
||||
const getAllSignatures = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
|
|
@ -52,7 +61,7 @@ const SignatureManager: React.FC = () => {
|
|||
console.log('Edit signature:', id);
|
||||
let editSignature = signatures.find((item) => item.id === id);
|
||||
console.log("editSignature", editSignature);
|
||||
|
||||
|
||||
if (editSignature) {
|
||||
setEditingSignature(editSignature);
|
||||
setShowAddSignature(true);
|
||||
|
|
@ -100,6 +109,34 @@ const SignatureManager: React.FC = () => {
|
|||
setEditingSignature(null);
|
||||
};
|
||||
|
||||
|
||||
const renderSignatureText = (type, font, firstName, lastName, mode = 'name') => {
|
||||
if (type !== 'SELECT') return null;
|
||||
|
||||
const selectedFont = signatureOptions.find(opt => opt.style === font);
|
||||
const fontClass = `${selectedFont?.style || 'print'}`;
|
||||
console.log("fontClass",fontClass)
|
||||
|
||||
|
||||
if (mode === 'initials') {
|
||||
const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
|
||||
return (
|
||||
<div className={`text-center text-[24px]`} style={{fontFamily:selectedFont?.style}}>
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const fullName = `${firstName ?? ''} ${lastName ?? ''}`.trim();
|
||||
return (
|
||||
<div className={`text-center text-[20px]`}style={{fontFamily:selectedFont?.style}}>
|
||||
<div>{fullName}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? <div className=' flex items-center justify-center'>
|
||||
|
|
@ -111,7 +148,7 @@ const SignatureManager: React.FC = () => {
|
|||
</div>
|
||||
</div> :
|
||||
<div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6">
|
||||
<div className="max-w-[84vw] mx-auto">
|
||||
<div className="max-w-[84vw] mx-auto ">
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
|
|
@ -126,107 +163,121 @@ const SignatureManager: React.FC = () => {
|
|||
</div>
|
||||
|
||||
{/* Table Card */}
|
||||
<div className="bg-white rounded-md overflow-hidden border border-gray-100">
|
||||
{/* Table Header */}
|
||||
<div className="bg-gray-50 border-b border-gray-200">
|
||||
<div className="grid grid-cols-12 gap-4 px-6 py-4">
|
||||
<div className="col-span-5">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="bg-white rounded-md min-w-[800px] md:min-w-full overflow-hidden border border-gray-100">
|
||||
{/* Table Header */}
|
||||
<div className="bg-gray-50 border-b border-gray-200 ">
|
||||
<div className="grid grid-cols-12 gap-4 px-6 py-4">
|
||||
<div className="col-span-5">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
|
||||
</div>
|
||||
<div className="col-span-5">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
|
||||
</div>
|
||||
<div className="col-span-2">
|
||||
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table Body */}
|
||||
<div className="divide-y divide-gray-100">
|
||||
{signatures.map((signature, index) => (
|
||||
<div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
|
||||
{/* Signature Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
{/* Label */}
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Signed by:
|
||||
</div>
|
||||
|
||||
{/* Signature Image */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center ">
|
||||
<img
|
||||
src={`data:${signature.signatureMimeType};base64,${signature.signatureBlob}`}
|
||||
className="h-[50px] w-[250px] object-contain"
|
||||
alt="Signature"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Signature ID */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature.signatureHash}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Initial Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
{/* Label */}
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Initials
|
||||
</div>
|
||||
|
||||
{/* Signature Image */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center ">
|
||||
<img
|
||||
src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
|
||||
className="h-[50px] object-contain"
|
||||
alt="DS Signature"
|
||||
/>
|
||||
</div>
|
||||
{/* Initial ID */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature.initialsHash}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions Column */}
|
||||
<div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
|
||||
<div className="relative ">
|
||||
<button
|
||||
onClick={() => toggleDropdown(signature.id)}
|
||||
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center transition-all duration-200 border border-gray-300 "
|
||||
>
|
||||
ACTIONS
|
||||
<FiMoreVertical />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{activeDropdown === signature.id && (
|
||||
<div className="absolute right-0 mt-0.5 w-28 bg-white rounded-lg border border-gray-200 z-10 py-1">
|
||||
<button
|
||||
onClick={() => handleEdit(signature.id)}
|
||||
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm transition-colors duration-150"
|
||||
>
|
||||
<FiEdit3 />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(signature.id)}
|
||||
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3 text-sm transition-colors duration-150"
|
||||
>
|
||||
<FiTrash2 />
|
||||
Delete
|
||||
</button>
|
||||
{/* Table Body */}
|
||||
<div className="divide-y divide-gray-100">
|
||||
{signatures.map((signature, index) => (
|
||||
<div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
|
||||
{/* Signature Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
{/* Label */}
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Signed by:
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Signature Image or Name/Initials */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
|
||||
{signature?.signatureType !== 'SELECT' ? (
|
||||
<img
|
||||
src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
|
||||
className="h-[50px] w-[250px] object-contain"
|
||||
alt="Signature"
|
||||
/>
|
||||
) : (
|
||||
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'name')
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Signature ID */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature.signatureHash}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Initial Column */}
|
||||
<div className="col-span-5">
|
||||
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
|
||||
{/* Label */}
|
||||
<div className="text-sm text-gray-600 font-medium mb-1">
|
||||
Initials
|
||||
</div>
|
||||
|
||||
{/* Signature Initials: Image or Generated Text */}
|
||||
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
|
||||
{signature?.signatureType !== 'SELECT' ? (
|
||||
<img
|
||||
src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
|
||||
className="h-[50px] object-contain"
|
||||
alt="Initials"
|
||||
/>
|
||||
) : (
|
||||
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'initials')
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Initial ID */}
|
||||
<div className="text-xs text-gray-500 truncate">
|
||||
{signature.initialsHash}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Actions Column */}
|
||||
<div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
|
||||
<div className="relative ">
|
||||
<button
|
||||
onClick={() => toggleDropdown(signature.id)}
|
||||
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center transition-all duration-200 border border-gray-300 "
|
||||
>
|
||||
ACTIONS
|
||||
<FiMoreVertical />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{activeDropdown === signature.id && (
|
||||
<div className={`absolute right-0 mt-0.5 -top-5 w-28 bg-white rounded-lg border border-gray-200 z-10 py-1`}>
|
||||
<button
|
||||
onClick={() => handleEdit(signature.id)}
|
||||
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm transition-colors duration-150"
|
||||
>
|
||||
<FiEdit3 />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(signature.id)}
|
||||
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3 text-sm transition-colors duration-150"
|
||||
>
|
||||
<FiTrash2 />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -252,8 +303,8 @@ const SignatureManager: React.FC = () => {
|
|||
)}
|
||||
|
||||
{showAddSignature && (
|
||||
<AddSignatureModal
|
||||
setShowAddSignature={handleModalClose}
|
||||
<AddSignatureModal
|
||||
setShowAddSignature={handleModalClose}
|
||||
getAllSignatures={getAllSignatures}
|
||||
editingSignature={editingSignature}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,57 @@
|
|||
import { FiX, FiEdit2 } from 'react-icons/fi';
|
||||
import { FiX, FiEdit2 } from "react-icons/fi";
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
name:string
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface UserProfileProps {
|
||||
userData: UserData;
|
||||
userData: UserData;
|
||||
}
|
||||
|
||||
const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
|
||||
const getInitials = (firstName: string, lastName: string) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
return (
|
||||
<div className="bg-white rounded-md shadow-sm flex w-full p-6">
|
||||
{/* Profile Picture */}
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="w-20 h-20 bg-[var(--primary)] text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
|
||||
{userData.name.slice(0,2).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6">
|
||||
{/* Profile Picture */}
|
||||
<div className="flex-shrink-0 text-center">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
|
||||
{userData.name.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Info Fields */}
|
||||
<div className="flex flex-col justify-center flex-1 ms-10">
|
||||
{/* Row: Name */}
|
||||
<div className="flex py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] w-32">Name</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">
|
||||
{userData.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row: Email */}
|
||||
<div className="flex py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] w-32">Email</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
|
||||
</div>
|
||||
|
||||
{/* Row: Account Name */}
|
||||
<div className="flex py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] w-32">Account name</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">
|
||||
{userData.account.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Info Fields */}
|
||||
<div className="flex flex-col justify-center flex-1 w-full">
|
||||
{/* Row: Name */}
|
||||
<div className="flex flex-col sm:flex-row py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
|
||||
</div>
|
||||
|
||||
{/* Row: Email */}
|
||||
<div className="flex flex-col sm:flex-row py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
{/* Row: Account Name */}
|
||||
<div className="flex flex-col sm:flex-row py-1">
|
||||
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
|
||||
<div className="text-gray-400 font-medium text-[13px]">
|
||||
{userData.account.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile
|
||||
export default UserProfile;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ interface AddSignatureModalProps {
|
|||
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
saved: SaveType;
|
||||
setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
|
||||
signTagId: boolean
|
||||
signTagId: number
|
||||
}
|
||||
|
||||
interface Account {
|
||||
|
|
|
|||
|
|
@ -41,6 +41,34 @@ const TemplateTable = () => {
|
|||
}, [activeAccountId])
|
||||
|
||||
|
||||
// Listen for sessionStorage changes
|
||||
useEffect(() => {
|
||||
const handleStorageChange = (e: StorageEvent) => {
|
||||
if (e.key === 'activeAccountId') {
|
||||
const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
|
||||
setActiveAccountId(newActiveAccountId);
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for storage events (works for changes from other tabs)
|
||||
window.addEventListener('storage', handleStorageChange);
|
||||
|
||||
// Custom event listener for same-tab changes
|
||||
const handleCustomStorageChange = (e: CustomEvent) => {
|
||||
if (e.detail.key === 'activeAccountId') {
|
||||
setActiveAccountId(e.detail.newValue);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('storage', handleStorageChange);
|
||||
window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
const formatDate = (timestamp: number) => {
|
||||
return new Date(timestamp * 1000).toLocaleString();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,6 +28,8 @@ const Templates = () => {
|
|||
|
||||
const filters = ["All", "My Templates", "Shared"];
|
||||
|
||||
|
||||
|
||||
const handleAddTemplate = async () => {
|
||||
console.log("handleAddTemplate called");
|
||||
try {
|
||||
|
|
@ -39,23 +41,23 @@ const Templates = () => {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="p-3 text-sm">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
|
||||
{/* Filter as pill buttons */}
|
||||
<div className="flex gap-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{filters.map((filter) => (
|
||||
<button
|
||||
key={filter}
|
||||
onClick={() => setActiveFilter(filter)}
|
||||
className={`px-3 py-1 rounded-full text-xs border transition
|
||||
${activeFilter === filter
|
||||
className={`px-3 py-1 rounded-full text-xs border transition
|
||||
${activeFilter === filter
|
||||
? "bg-[var(--primary)] text-white"
|
||||
: "border-gray-300 text-gray-600 hover:bg-gray-100"
|
||||
}`}
|
||||
|
|
@ -65,20 +67,22 @@ const Templates = () => {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Template Button */}
|
||||
<div
|
||||
onClick={handleAddTemplate}
|
||||
className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-2.5 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
|
||||
<IoMdAdd className="text-white" />
|
||||
<button
|
||||
className="text-white rounded text-sm hover:opacity-90">
|
||||
className="flex items-center justify-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-2 rounded-sm cursor-pointer hover:opacity-90"
|
||||
>
|
||||
<IoMdAdd className="text-white text-lg" />
|
||||
<button className="text-white text-sm font-medium">
|
||||
Add Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Table */}
|
||||
<section className="my-4 mx-3"></section>
|
||||
<TemplateTable/>
|
||||
<TemplateTable />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
setLoading(true)
|
||||
try {
|
||||
let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=${userDetails.language || ''}`)
|
||||
// let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=hi`)
|
||||
if (res?.status === 200) {
|
||||
// console.log(res?.data?.events)
|
||||
let auditResponse = res?.data?.events
|
||||
|
|
@ -125,11 +126,12 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
];
|
||||
|
||||
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" />,
|
||||
'COMPLETED': <FiCheckCircle className="w-4 h-4 bg-green-600 text-white rounded-full" />,
|
||||
'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" />,
|
||||
|
|
@ -147,7 +149,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
|
||||
'EDITED': <FiEdit className="w-4 h-4" />,
|
||||
};
|
||||
|
||||
console.log("getActionIcons", action || <FiActivity className="w-4 h-4" />)
|
||||
return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
|
||||
};
|
||||
|
||||
|
|
@ -217,15 +219,12 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
};
|
||||
|
||||
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">
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50 px-2">
|
||||
<div className="bg-white rounded-md shadow-md w-full h-[90vh] max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-[75vw] overflow-hidden 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>
|
||||
<h2 className="text-base sm:text-lg md:text-xl font-semibold text-white">Audit Status</h2>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
className="text-white cursor-pointer transition-colors hover:text-gray-200"
|
||||
|
|
@ -236,74 +235,57 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
|
||||
{/* 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.length ? (
|
||||
<div className="space-y-3">
|
||||
{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 key={index} className="flex items-start space-x-3 pb-3 border-b border-gray-100 last:border-b-0">
|
||||
<div className={`${getActionColor(item.action.toUpperCase())} mt-1`}>
|
||||
{getActionIcon(item.action.toUpperCase())}
|
||||
</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">
|
||||
<p className="text-gray-600 font-medium text-xs sm:text-xs mb-1">
|
||||
{item.message}
|
||||
</p>
|
||||
<div className="flex flex-wrap 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>
|
||||
<span className="hidden sm:inline">•</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)}`}>
|
||||
<div className="flex flex-wrap items-center space-x-2 mb-2 text-xs text-gray-600">
|
||||
<span>Status:</span>
|
||||
<span className={`px-2 py-0.5 rounded-full ${getStatusBadge(item.status)}`}>
|
||||
{item.status}
|
||||
</span>
|
||||
<span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
|
||||
<span className="text-gray-500">{formatTimestamp(item.timestamp)}</span>
|
||||
{item.language && (
|
||||
<span className="text-xs text-gray-400 uppercase">{item.language}</span>
|
||||
<span className="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">
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
<img
|
||||
src={logoRecord}
|
||||
alt="Record Not Found"
|
||||
className="w-80 h-80 opacity-70" // adjust size and appearance
|
||||
className="w-64 h-64 opacity-70 object-contain"
|
||||
/>
|
||||
</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">
|
||||
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50 text-sm">
|
||||
<div className="text-gray-600">
|
||||
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
|
||||
</div>
|
||||
<button
|
||||
|
|
@ -315,6 +297,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ const TransactionView = () => {
|
|||
|
||||
const fetchDocuments = async () => {
|
||||
try {
|
||||
const res = await api.get(`https://concrete-gladly-mullet.ngrok-free.app/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`)
|
||||
const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents`)
|
||||
if (res?.status === 200) {
|
||||
let resDoc = res?.data
|
||||
setDocumentsData(resDoc)
|
||||
|
|
@ -112,15 +112,27 @@ const TransactionView = () => {
|
|||
window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
|
||||
}
|
||||
|
||||
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';
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{transactionDetails &&
|
||||
<>
|
||||
<div className='mt-2 flex justify-center items-stretch max-w-90vw min-h-[88vh] h-full bg-white rounded-lg shadow-sm mx-3'>
|
||||
<div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
|
||||
<div className='mt-2 grid grid-cols-1 lg:grid-cols-12 items-stretch max-w-90vw min-h-[88vh] h-full bg-white rounded-lg shadow-sm mx-3'>
|
||||
<div className="lg:col-span-10 w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<h1 className='text-lg font-semibold text-gray-800'>
|
||||
Complete with Forms Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
|
||||
Complete with Sign Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
|
||||
</h1>
|
||||
|
||||
<div className='mt-2'>
|
||||
|
|
@ -170,38 +182,55 @@ const TransactionView = () => {
|
|||
{/* Recipients List */}
|
||||
{transactionDetails.recipients.map((recipient, index) => (
|
||||
<div key={index}>
|
||||
<div className='mt-2 flex justify-between items-center'>
|
||||
<div className='flex gap-8 items-center'>
|
||||
{/* <p className='text-slate-600'>{index+1}</p> */}
|
||||
<div className="mt-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 ">
|
||||
|
||||
{/* Left section: recipient info */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 sm:items-center">
|
||||
<div>
|
||||
<p className='text-slate-600 font-semibold'>{recipient.name}</p>
|
||||
<p className='text-slate-600'>{recipient.email}</p>
|
||||
{recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
|
||||
<p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p>
|
||||
<p className="text-slate-600 text-xs sm:text-xs">{recipient.email}</p>
|
||||
{recipient.hostEmail && (
|
||||
<p className="text-xs text-gray-500 italic">
|
||||
<strong>Host:</strong> {recipient.hostEmail}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col leading-4.5 items-start text-md text-slate-600'>
|
||||
<div className='flex gap-3 items-center relative'>
|
||||
<div className='flex gap-1 items-center relative'>
|
||||
<AiFillSignature className='absolute left-[-30px] text-[1rem]' />
|
||||
<p className='text-black font-semibold'>{recipient.status}</p>
|
||||
{/* Right section: status and actions */}
|
||||
<div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
|
||||
<div className="flex flex-wrap gap-3 items-center relative">
|
||||
<div className="pl-6 relative">
|
||||
<AiFillSignature className="absolute left-0 top-0 text-[1rem]" />
|
||||
<p className={`text-black text-xs font-semibold rounded-lg px-2 py-0.5 ${getStatusBadge(recipient.status)}`}>{recipient.status}</p>
|
||||
</div>
|
||||
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
|
||||
<p
|
||||
|
||||
{recipient.email === user.email && recipient.status !== "COMPLETED" && (
|
||||
<button
|
||||
onClick={() => handleNavigateToSign(recipient.id)}
|
||||
className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
|
||||
className="text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold text-xs hover:bg-opacity-90 transition"
|
||||
>
|
||||
Sign
|
||||
</p>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
|
||||
{/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
|
||||
View signed location
|
||||
</a> */}
|
||||
|
||||
{recipient.status !== "PENDING" && (
|
||||
<p className="text-xs text-gray-500">on {recipient.completedAt}</p>
|
||||
)}
|
||||
{/* Optional signed document link */}
|
||||
{/* {recipient.viewLink && (
|
||||
<a href={recipient.viewLink} className="text-blue-600 text-xs hover:underline">
|
||||
View signed location
|
||||
</a>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
<hr className='my-2 border-slate-200' />
|
||||
|
||||
<hr className="my-3 border-slate-200" />
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
@ -219,19 +248,25 @@ const TransactionView = () => {
|
|||
</div>}
|
||||
</div>
|
||||
|
||||
<div className='lg:w-[15vw] sm:w-[20vw] text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
|
||||
<div className='lg:col-span-2 text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
|
||||
{documentsData.map((docsD, index) => (
|
||||
<div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
|
||||
<p>{docsD.name}</p>
|
||||
<div className='border-3 rounded-sm border-slate-300 relative text-xs'>
|
||||
{docsD?.pages[0]?.src ?
|
||||
<img style={{ width: "200px", height: "160px" }} src={docsD?.pages[0]?.src} alt="" loading='lazy'/>
|
||||
:
|
||||
<FaFile className='h-35 w-20 mx-5 text-gray-300' />}
|
||||
{docsD?.thumbnail ? (
|
||||
<img
|
||||
style={{ width: "200px", height: "160px" }}
|
||||
src={`data:image/jpeg;base64,${docsD.thumbnail}`} // Adjust MIME type if needed
|
||||
alt=""
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<FaFile className="h-35 w-20 mx-5 text-gray-300" />
|
||||
)}
|
||||
<div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
|
||||
<p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
|
||||
<span> 1 of {docsD?.pages?.length}</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
|
||||
<p className='text-[0.7rem] text-slate-500 flex justify-end items-center'>
|
||||
{/* <span> 1 of {docsD?.pages?.length}</span> */}
|
||||
<span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,18 @@
|
|||
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
/* Button press effect */
|
||||
.btn:active {
|
||||
transform: scale(0.97) translateY(1px);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Sortable CSS */
|
||||
.sortable-ghost {
|
||||
|
|
|
|||
|
|
@ -465,8 +465,12 @@ export const fetchRecipients = createAsyncThunk<
|
|||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
const response = await api.get(basePath);
|
||||
|
||||
const data = response.data as Recipient[];
|
||||
let data = response.data as Recipient[];
|
||||
|
||||
data = data.filter((recipient, indx) => {
|
||||
return recipient.type !== "CC";
|
||||
})
|
||||
|
||||
if (data.length === 0 && window.location.pathname.includes('/process-step-two')) {
|
||||
window.location.href = window.location.href.replace("process-step-two", "process-step-one") // ✅ navigate using window
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { MASKCHARACTER } from "../components/process/processStepTwo/rightSideBar/RightSideBar";
|
||||
|
||||
const type_all = (str: string, changeWith: string): string => {
|
||||
return str.replace(/./g, changeWith);
|
||||
};
|
||||
|
|
@ -38,6 +40,19 @@ const type_social_insurance = (str: string, changeWith: string): string => {
|
|||
};
|
||||
|
||||
const maskUtils = (type: string, original: string, changeWith: string): string => {
|
||||
|
||||
switch (changeWith) {
|
||||
case MASKCHARACTER.ASTERISK:
|
||||
changeWith = "*";
|
||||
break;
|
||||
case MASKCHARACTER.DOT:
|
||||
changeWith = ".";
|
||||
break;
|
||||
case MASKCHARACTER.X:
|
||||
changeWith = "x";
|
||||
break;
|
||||
}
|
||||
|
||||
switch (type) {
|
||||
case "ALL":
|
||||
return type_all(original, changeWith);
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ export interface TagsProperties {
|
|||
"currentTimeStamp"?: boolean;
|
||||
"decimalPlace"?: number;
|
||||
"multiSelect"?: boolean;
|
||||
"isCurrency"?: boolean;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -127,7 +128,7 @@ export enum SignTypeEnum {
|
|||
|
||||
|
||||
|
||||
interface StylesInterface {
|
||||
export interface StylesInterface {
|
||||
font: string,
|
||||
italic: boolean,
|
||||
bold: boolean,
|
||||
|
|
@ -136,6 +137,15 @@ interface StylesInterface {
|
|||
textSize: number
|
||||
}
|
||||
|
||||
export interface TagOptionAttrType{
|
||||
label: string;
|
||||
value: string;
|
||||
pageIndex?: number;
|
||||
selected?: boolean;
|
||||
readOnly?: boolean;
|
||||
dimensions?: Record<string, any>;
|
||||
}
|
||||
|
||||
|
||||
export interface DroppedItem {
|
||||
id?: string;
|
||||
|
|
@ -143,12 +153,44 @@ export interface DroppedItem {
|
|||
label?: string;
|
||||
type: string;
|
||||
|
||||
// TagsProperties - Other Properties depend on tag type - START
|
||||
navigationOrder: number;
|
||||
editable: boolean;
|
||||
|
||||
lastName?: boolean;
|
||||
firstName?: boolean;
|
||||
|
||||
maxLength?: number;
|
||||
minLength?: number;
|
||||
|
||||
dateFormat?: string;
|
||||
format?: string;
|
||||
currentTimeStamp?: boolean;
|
||||
|
||||
decimalPlace?: number;
|
||||
isCurrency?: boolean;
|
||||
|
||||
multiLine?: boolean;
|
||||
maskType?: string;
|
||||
maskCharacter?: string;
|
||||
|
||||
multiSelect?: boolean;
|
||||
options?: TagOptionAttrType[];
|
||||
|
||||
readOnly?: boolean;
|
||||
error: string;
|
||||
regex?: string[];
|
||||
// TagsProperties - Other Properties depend on tag type - END
|
||||
|
||||
dimensions: {
|
||||
left: number;
|
||||
top: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
styles?: StylesInterface;
|
||||
|
||||
recipientId: number;
|
||||
|
||||
documentId: string;
|
||||
|
|
@ -158,26 +200,14 @@ export interface DroppedItem {
|
|||
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