Compare commits
2 Commits
ee6160ff71
...
a1c93a4a61
| Author | SHA1 | Date |
|---|---|---|
 jaipandey
|
a1c93a4a61 | |
|
JaiPandey425
|
c5043cccb1 |
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -126,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" />,
|
||||
|
|
@ -148,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" />;
|
||||
};
|
||||
|
||||
|
|
@ -218,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"
|
||||
|
|
@ -237,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
|
||||
|
|
@ -316,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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue