BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

signature-modal-mobile-view #20

Merged
jaipandey merged 1 commits from jai into main 2025-08-22 10:21:15 +00:00
Conversation 0 Commits 1 Files Changed 21 +1058 -627
21 changed files with 1058 additions and 627 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
src/components/CommonNav.tsx
View File

@ -1,12 +1,14 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom'; 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'; import api from '../config/api';
interface AccountNavProps { interface AccountNavProps {
accountName?: string | null; accountName?: string | null;
transactionName?: string | null; transactionName?: string | null;
showSideBar?: boolean;
setShowSideBar?: (show: boolean) => void;
isMobile?: boolean;
} }
interface Account { 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 activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}'); const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
console.log("activeAccountId", activeAccountId); console.log("activeAccountId", activeAccountId);
@ -112,7 +118,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
dispatchSessionStorageChange('activeAccountId', account.accountId); dispatchSessionStorageChange('activeAccountId', account.accountId);
// Update user state // Update user state
setUser({ setUser({
id: account.userId, id: account.userId,
name: account.name, name: account.name,
@ -141,7 +146,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
setOpen(false); setOpen(false);
}; };
const navigate = useNavigate(); const navigate = useNavigate();
const getUserDetails = async () => { const getUserDetails = async () => {
@ -173,8 +177,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
console.log("Data is saved in sessionStorage"); console.log("Data is saved in sessionStorage");
} }
} catch (error) { } catch (error) {
console.error("Error fetching user details:", error); console.error("Error fetching user details:", error);
} }
@ -194,17 +196,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
.split("/") .split("/")
.filter((x) => x && isNaN(Number(x))); .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(() => { useEffect(() => {
function handleClickOutside(event: MouseEvent) { 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) => const formatSegment = (segment: string) =>
segment segment
.replace(/[-_]/g, " ") .replace(/[-_]/g, " ")
.replace(/\b\w/g, (char) => char.toUpperCase()); .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 = () => ( const ShimmerRow = () => (
<div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0"> <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="flex items-center space-x-3">
@ -263,15 +283,31 @@ const CommonNav: React.FC<AccountNavProps> = () => {
); );
return ( return (
<header className="w-full px-6 py-1.5 flex justify-between items-center bg-white border-b border-gray-200"> <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>
)}
{/* Breadcrumb Navigation */}
<nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap"> <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
{pathnames.length === 0 ? ( {filteredPathnames.length === 0 ? (
<span className="text-gray-900 font-semibold">Home</span> <span className="text-gray-900 font-semibold">Home</span>
) : ( ) : (
pathnames.map((segment, index) => { filteredPathnames.map((segment, index) => {
const label = labelMap[segment] || formatSegment(segment); const label = labelMap[segment] || formatSegment(segment);
const to = "/" + pathnames.slice(0, index + 1).join("/"); const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
const isLast = index === pathnames.length - 1; const isLast = index === filteredPathnames.length - 1;
return ( return (
<span key={to} className="flex items-center"> <span key={to} className="flex items-center">
@ -291,6 +327,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
}) })
)} )}
</nav> </nav>
</div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
@ -407,6 +444,20 @@ const CommonNav: React.FC<AccountNavProps> = () => {
</div> </div>
</header> </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; export default CommonNav;

2
src/components/accounts/Account.tsx
View File

@ -249,7 +249,7 @@ const Account = () => {
<Cards type="transactions" onOpenModal={handleOpenModal} cards={cards} <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
isLoading={isLoading} /> isLoading={isLoading} />
<section className="my-4 mx-3"> <section className="my-4 mx-3">
<TransactionDataTable /> <TransactionDataTable activeAccountId={activeAccountId}/>
</section> </section>
{isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading} {isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}

5
src/components/accounts/TransactionDataTable.tsx
View File

@ -22,16 +22,13 @@ const statusColorMap = {
}; };
const TransactionDataTable = () => { const TransactionDataTable = ({activeAccountId}) => {
const navigate = useNavigate() const navigate = useNavigate()
const loaction = useLocation() const loaction = useLocation()
console.log("loaction", loaction.pathname); console.log("loaction", loaction.pathname);
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null'); const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]); const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
);
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const fetchTransactions = async () => { const fetchTransactions = async () => {

1
src/components/auth/LoginForm.tsx
View File

@ -108,6 +108,7 @@ function LoginForm() {
.then((res) => { .then((res) => {
console.log(res.status, "Response Status Line 42 LoginForm.tsx", res); console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
if (res.status === 200) { if (res.status === 200) {
toast.dismiss(); toast.dismiss();
// console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization); // console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
// Cookies.set("authorization", res.headers.authorization, { // Cookies.set("authorization", res.headers.authorization, {

62
src/components/contacts/ContactsFormModal.tsx
View File

@ -170,12 +170,12 @@ const ContactFormModal = ({
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30"> <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 shadow-lg relative"> <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="ms-2 space-y-2 max-w-[60vw]"> <div className="space-y-4">
<h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2> <h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{[ {[
{ label: "First Name", field: "firstName" }, { label: "First Name", field: "firstName" },
{ label: "Last Name", field: "lastName" }, { label: "Last Name", field: "lastName" },
@ -190,72 +190,29 @@ const ContactFormModal = ({
{label} {label}
</label> </label>
<input <input
type={fieldType ? fieldType : "text"} type={fieldType ?? "text"}
value={(formData[field as keyof ContactData] as string) || ""} value={(formData[field as keyof ContactData] as string) || ""}
onChange={(e) => onChange={(e) =>
handleChange(field as keyof ContactData, e.target.value) handleChange(field as keyof ContactData, e.target.value)
} }
required={true} 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" 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}`} placeholder={`Enter ${label}`}
/> />
{errors[field] && ( {errors[field] && (
<span className="text-sm text-red-500 mt-1"> <span className="text-sm text-red-500 mt-1">{errors[field]}</span>
{errors[field]}
</span>
)} )}
</div> </div>
))} ))}
</div> </div>
{/* <div> <div className="flex flex-col sm:flex-row justify-end gap-3 mt-4">
<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 <button
type="button" type="button"
onClick={() => setShowModal((prev) => !prev)} onClick={() => setShowModal((prev) => !prev)}
disabled={loading} 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" 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 Cancel
</button> </button>
<button <button
@ -277,6 +234,7 @@ const ContactFormModal = ({
</div> </div>
</div> </div>
</div> </div>
); );
}; };

61
src/components/dashboard/Dashboard.tsx
View File

@ -1,3 +1,4 @@
// Dashboard.jsx - Updated version
import React, { useEffect, useLayoutEffect } from 'react' import React, { useEffect, useLayoutEffect } from 'react'
import SideBar from './SideBar' import SideBar from './SideBar'
import { Outlet, useNavigate } from 'react-router-dom' import { Outlet, useNavigate } from 'react-router-dom'
@ -22,6 +23,7 @@ import CommonNav from '../CommonNav'
function Dashboard() { function Dashboard() {
const [showSideBar, setShowSideBar] = React.useState(true) const [showSideBar, setShowSideBar] = React.useState(true)
const [showConfetti, setShowConfetti] = React.useState(false) const [showConfetti, setShowConfetti] = React.useState(false)
const [isMobile, setIsMobile] = React.useState(false)
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -74,8 +76,6 @@ function Dashboard() {
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return; if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
@ -102,7 +102,6 @@ function Dashboard() {
dispatch(hideLoader()); dispatch(hideLoader());
}, [documentSignType]) }, [documentSignType])
useEffect(() => { useEffect(() => {
if (showConfetti) { if (showConfetti) {
const duration = 3000; const duration = 3000;
@ -130,7 +129,28 @@ function Dashboard() {
} }
}, [showConfetti]); }, [showConfetti]);
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
}
};
// Set sidebar visibility on mount
handleResize();
// Add event listener
window.addEventListener('resize', handleResize);
// Cleanup listener on unmount
return () => window.removeEventListener('resize', handleResize);
}, []);
return ( return (
<> <>
@ -165,19 +185,44 @@ function Dashboard() {
{ {
user?.authorized && user?.authorized &&
<div className={`relative`}> <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' : ''}`}> <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 */} {/* 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 */} {/* Main Content */}
<div className=''> <div>
<CommonNav /> <CommonNav
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
isMobile={isMobile}
/>
<Outlet /> <Outlet />
</div> </div>
</div> </div>
{/* On Top Main Content - END */} {/* On Top Main Content - END */}
</div> </div>

67
src/components/dashboard/SendForSign.tsx
View File

@ -84,7 +84,7 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
ref={dropDownRef} ref={dropDownRef}
onBlur={() => setSendForSignDropdown(false)} 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]"}`}> 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 <div
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)} onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
@ -97,32 +97,77 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
<IoIosSend className={`pl-2 text-3xl`} /> <IoIosSend className={`pl-2 text-3xl`} />
} }
</div> </div>
{showSideBar && {showSideBar &&
<p <p
className=' border-[var(--sendForSignTextCol)] px-2 py-2'> className=' border-[var(--sendForSignTextCol)] pe-2 py-2'>
<IoMdArrowDropdown <IoMdArrowDropdown
onClick={() => setSendForSignDropdown(!sendForSignDropdown)} onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} /> className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
</p>} </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> </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 */} {/* Drop Down Box */}
{ {
sendForSignDropdown && sendForSignDropdown &&
<div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}> <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-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' <div
onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}> className='py-2 px-6 leading-5 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
<p>Self Sign</p> onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}
<p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p> >
<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>
<div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></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' <div
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}> className='py-2 px-6 leading-5 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
<p>Send for Sign</p> onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
<p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p> >
<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> </div>
} }
</div> </div>
) )
} }

36
src/components/dashboard/SideBar.tsx
View File

@ -1,3 +1,4 @@
// SideBar.jsx - Updated version
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import NavLink from './NavLink'; import NavLink from './NavLink';
@ -16,6 +17,7 @@ import logoSME from '../../assets/SMELogo.png'
type SideBarProps = { type SideBarProps = {
showSideBar: boolean; showSideBar: boolean;
setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>; setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>;
isMobile?: boolean;
}; };
type MenuPathMap = { type MenuPathMap = {
@ -30,7 +32,7 @@ const menuPathMap: MenuPathMap = {
'/contacts': 'Contacts' '/contacts': 'Contacts'
}; };
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => { const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile = false }) => {
const location = useLocation(); const location = useLocation();
const [showLogoutModal, setShowLogoutModal] = useState(false); const [showLogoutModal, setShowLogoutModal] = useState(false);
@ -54,7 +56,17 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
return ( return (
<> <>
{/* Side Bar */} {/* 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 */} {/* Menu */}
<div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}> <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'> <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 */} {/* SideBar Toggle Button */}
<div <div
onClick={() => setShowSideBar(!showSideBar)} 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
`}
> >
{!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 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> <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 ? ( {showSideBar ? (
<BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' /> <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 */} {/* Logout Confirmation Modal */}
{showLogoutModal && ( {showLogoutModal && (
<div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50"> <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> <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> <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">

34
src/components/home/StartSection.tsx
View File

@ -47,6 +47,9 @@ const cards = [
const StartSection = () => { const StartSection = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch<AppDispatch>() const dispatch = useDispatch<AppDispatch>()
const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
);
const user = useSelector((state: RootState) => state.user); const user = useSelector((state: RootState) => state.user);
if (!user.account || user.account === null) { 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 ( return (
<section className="px-3 py-2 w-full mt-2"> <section className="px-3 py-2 w-full mt-2">
<h2 className="text-sm font-semibold text-gray-800 px-1 pb-2"> <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
@ -95,7 +127,7 @@ const StartSection = () => {
{/* Recent Data Section */} {/* Recent Data Section */}
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5"> <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
<section className="w-full"> <section className="w-full">
<TransactionDataTable /> <TransactionDataTable activeAccountId={activeAccountId}/>
</section> </section>
<section className="w-full"> <section className="w-full">
<TemplateTable /> <TemplateTable />

6
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -47,8 +47,8 @@ type Signer = {
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
return ( return (
// <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 "> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
<div className="p-6 "> <div className="p-2 ">
<div className="flex items-center justify-evenly mb-2"> <div className="flex items-center justify-evenly mb-1">
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 "> <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
<FaUsers className="text-blue-600" /> <FaUsers className="text-blue-600" />
Signature Status Signature Status
@ -58,7 +58,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </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) => ( {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 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"> <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">

2
src/components/process/processStepOne/SelfSignWarnModal.tsx
View File

@ -9,7 +9,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
const navigate = useNavigate() const navigate = useNavigate()
return ( 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"> <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> <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
<p className="text-gray-600 mb-6"> <p className="text-gray-600 mb-6">

42
src/components/setting/Setting.tsx
View File

@ -415,9 +415,9 @@ const Setting = () => {
{/* <SettingNav /> */} {/* <SettingNav /> */}
{/* <AccountNav/> */} {/* <AccountNav/> */}
<div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2"> <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
{/* Main Navigation Tabs */} {/* Tabs */}
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-5"> <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 gap-6"> <div className="flex flex-wrap gap-4 md:gap-6">
{tabs.map((tab) => {tabs.map((tab) =>
tab.type === page1 && ( tab.type === page1 && (
<button <button
@ -436,11 +436,12 @@ const Setting = () => {
</div> </div>
</div> </div>
{/* Content with Aside Navigation */} {/* Responsive Layout */}
<div className="flex mt-3 px-8 flex-1 min-h-0"> <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">
{/* Fixed Aside Navigation - Shows subsections of active tab */}
{activeTab === 'userProfile' && {/* Sidebar (hidden on small, shown on lg) */}
<section className="flex-shrink-0 mr-6 w-50 relative"> {activeTab === 'userProfile' && (
<section className="hidden lg:block flex-shrink-0 w-56">
<div className="sticky top-6 z-20"> <div className="sticky top-6 z-20">
<AsideSection <AsideSection
activeSubSection={activeSubSection} activeSubSection={activeSubSection}
@ -450,8 +451,28 @@ const Setting = () => {
/> />
</div> </div>
</section> </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 <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="flex-1 min-w-0 overflow-y-auto no-scrollbar" className="flex-1 min-w-0 overflow-y-auto no-scrollbar"
@ -460,6 +481,7 @@ const Setting = () => {
</div> </div>
</div> </div>
</div> </div>
</> </>
) )
} }

373
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -55,6 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getAllSignatures, getAllSignatures,
editingSignature editingSignature
}) => { }) => {
console.log("editingSignature", editingSignature)
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT'); const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
const [fullName, setFullName] = useState(''); const [fullName, setFullName] = useState('');
const [initials, setInitials] = 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: "" } signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
); );
console.log("selectedSignature", selectedSignature)
// Store the actual file // Store the actual file
const [file1, setFile1] = useState<File | null>(null); const [file1, setFile1] = useState<File | null>(null);
const [file2, setFile2] = useState<File | null>(null); const [file2, setFile2] = useState<File | null>(null);
@ -107,10 +110,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
// Navigation items // Navigation items
const navigationItems = [ const navigationItems = [
{ 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-5 h-5" /> }, { 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-5 h-5" /> }, { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-3 h-3 md:w-4 md:h-4" /> },
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
]; ];
// Initialize form with editing signature data // Initialize form with editing signature data
@ -193,25 +195,43 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const handleSubmit = async () => { const handleSubmit = async () => {
setIsSubmitting(true); setIsSubmitting(true);
if (activeTab === 'DRAW' || activeTab === 'UPLOAD') { // Only validate for DRAW and UPLOAD
if (!signatures.fullSignature || !signatures.initials) { if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') &&
alert('Please provide both signature and initials'); (!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); setIsSubmitting(false);
return; return;
} }
}
try { try {
// Base payload
const payload = { const payload = {
signatureType: activeTab, signatureType: activeTab,
signatureBase64: signatures.fullSignature,
initialsBase64: signatures.initials,
firstName: fullName.split(' ')[0] || user.firstName, firstName: fullName.split(' ')[0] || user.firstName,
lastName: fullName.split(' ')[1] || user.lastName, lastName: fullName.split(' ')[1] || user.lastName,
font: selectedSignature.style, font: selectedSignature.style,
default: checked 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; let res;
if (isEditMode && editingSignature) { if (isEditMode && editingSignature) {
// Update existing signature // 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 = () => { const renderContent = () => {
switch (activeTab) { switch (activeTab) {
case 'SELECT': case 'SELECT':
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="mb-6"> <div className="mb-1 md:mb-4 lg:mb-6 flex-shrink-0">
<h2 className="text-xl font-semibold text-gray-900 mb-2">Choose Signature Style</h2> <h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Choose Signature Style</h2>
<p className="text-sm text-gray-600">Select from pre-designed signature styles</p> <p className="text-xs md:text-sm text-gray-600 hidden md:block">Select from pre-designed signature styles</p>
</div> </div>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
<div className="space-y-4"> <div className="space-y-2 md:space-y-3 pb-2">
{signatureOptions.map((option) => ( {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 <input
type="radio" type="radio"
id={`signature-${option.id}`} id={`signature-${option.id}`}
name="signature" name="signature"
checked={selectedSignature.id === option.id} checked={selectedSignature.id === option.id}
onChange={() => setSelectedSignature({ id: option.id, style: option.style })} 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="flex-1 min-w-0 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
<div className="text-xs text-gray-500 mb-2">Signed by:</div> <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-lg ${option.style === 'cursive' ? 'font-serif italic' : <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 === 'script' ? 'font-mono' :
option.style === 'elegant' ? 'font-serif' : option.style === 'elegant' ? 'font-serif' :
option.style === 'modern' ? 'font-sans tracking-wide' : option.style === 'modern' ? 'font-sans tracking-wide' :
@ -306,13 +351,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
}`}> }`}>
{fullName || option.name} {fullName || option.name}
</div> </div>
<div className="text-xs text-gray-400 mt-2"> <div className="text-xs text-gray-400 mt-1 truncate">
dca3e646-62cd-4cc... dca3e646-62cd-4cc...
</div> </div>
</div> </div>
<div className=" rounded-lg px-2 py-2 bg-white "> <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-2">DS</div> <div className="text-xs text-gray-500 mb-1">DS</div>
<div className={`text-2xl ${option.style === 'cursive' ? 'font-serif italic' : <div className={`text-lg md:text-xl truncate ${option.style === 'cursive' ? 'font-serif italic' :
option.style === 'script' ? 'font-mono' : option.style === 'script' ? 'font-mono' :
option.style === 'elegant' ? 'font-serif' : option.style === 'elegant' ? 'font-serif' :
option.style === 'modern' ? 'font-sans tracking-wide' : option.style === 'modern' ? 'font-sans tracking-wide' :
@ -331,31 +376,33 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
case 'DRAW': case 'DRAW':
return ( return (
<div className="h-full">
<DrawSignatureCanvas <DrawSignatureCanvas
onSignatureChange={handleSignatureChange} onSignatureChange={handleSignatureChange}
initialSignatures={isEditMode ? signatures : undefined} initialSignatures={isEditMode ? signatures : undefined}
/> />
</div>
); );
case 'UPLOAD': case 'UPLOAD':
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="mb-6"> <div className="mb-3 md:mb-4 lg:mb-6 flex-shrink-0">
<h2 className="text-xl font-semibold text-gray-900 mb-2">Upload Signature</h2> <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>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 min-h-0 overflow-y-auto">
<div> <div className="grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-4 pb-2">
<div className="grid grid-cols-12 gap-6"> {/* Upload 1 - Full Signature */}
{/* Upload 1 */} <div className="lg:col-span-8">
<div className="col-span-8"> <label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
<label className="block 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">
<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 ? ( {preview1 ? (
<img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" /> <img src={preview1} alt="Signature Preview" className="max-h-full max-w-full object-contain p-2" />
) : ( ) : (
<div className="text-center"> <div className="text-center px-4">
<MdCloudUpload className="mx-auto h-12 w-12 text-gray-400 mb-3" /> <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-sm text-gray-500 mb-1">Click to upload or drag and drop</p> <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> <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
</div> </div>
)} )}
@ -369,16 +416,17 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
/> />
</div> </div>
{/* Upload 2 */} {/* Upload 2 - Initials */}
<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> <label className="block text-xs md: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"> <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 ? ( {preview2 ? (
<img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" /> <img src={preview2} alt="Initials Preview" className="max-h-full max-w-full object-contain p-2" />
) : ( ) : (
<div className="text-center"> <div className="text-center px-2">
<MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-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 text-gray-500">Upload initials</p> <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> </div>
)} )}
</label> </label>
@ -393,17 +441,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
</div> </div>
</div> </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: default:
return null; return null;
} }
@ -430,25 +469,147 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getUserDetails(); getUserDetails();
}, []); }, []);
return ( 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="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 max-w-[80vw] h-[80vh] flex relative"> <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 ">
{/* Sidebar Navigation */} {/* Mobile Navigation - Fixed at top on mobile only */}
<div className="w-64 bg-gray-50 rounded-l-lg border-r border-gray-200 flex flex-col"> <div className="md:hidden flex-1 flex flex-col min-h-0">
{/* Header */}
<div className="px-4 py-4 border-b border-gray-200"> {/* Scrollable area (mobile: inputs + nav + content) */}
<div className="flex items-center space-x-3"> <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
<div className='px-1 py-1'> <div className="px-3 lg:px-6 py-2 border-b border-gray-200 flex-shrink-0">
<h3 className="text-md font-semibold text-gray-900">Add Signature </h3> <h3 className="text-sm font-semibold text-gray-900">
<p className="text-xs text-gray-500">Create your digital signature</p> {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> </div>
</div> </div>
{/* Form Inputs */} {/* Mobile Navigation - Sticky inside scroll */}
<div className="px-6 py-2.5 border-b border-gray-200"> <div className="md:hidden w-full bg-gray-50 border-b border-gray-200 sticky top-0 z-20">
<div className="space-y-2"> <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>
{/* 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> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Full Name Full Name
@ -458,10 +619,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
value={fullName} value={fullName}
onChange={(e) => setFullName(e.target.value)} onChange={(e) => setFullName(e.target.value)}
placeholder="Enter full name" 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>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Initials Initials
@ -471,109 +631,94 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
value={initials} value={initials}
onChange={(e) => setInitials(e.target.value)} onChange={(e) => setInitials(e.target.value)}
placeholder="Enter initials" 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> </div>
</div> </div>
{/* Navigation Menu */} {/* Navigation Menu - Fixed */}
<div className="flex-1 px-6 py-2.5"> <div className="px-4 lg:px-6 py-4 flex-shrink-0">
<nav className="space-y-2"> <nav className="flex flex-col gap-2">
{navigationItems.map((item) => ( {navigationItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')} 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 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' ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`} }`}
> >
<span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}> <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
{item.icon} {item.icon}
</span> </span>
<span>{item.label}</span> <span>{item.label}</span>
</button> </button>
))} ))}
</nav> </nav>
</div> </div>
{/* Spacer for desktop */}
<div className="flex-1"></div>
</div> </div>
{/* Main Content Area */} {/* Main Content Area */}
<div className="flex-1 flex flex-col "> <div className="hidden flex-1 md:flex flex-col min-h-0">
{/* Header with close button */} {/* 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">
{/* Content */} <div className="h-full min-h-[300px] md:min-h-[400px]">
<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()} {renderContent()}
</div> </div>
<div className="text-right px-6 py-1 text-white"> </div>
<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 <input
type="checkbox" type="checkbox"
checked={checked} checked={checked}
onChange={toggleCheckbox} onChange={toggleCheckbox}
className="sr-only" className="sr-only"
/> />
{/* Custom checkbox UI */}
<div <div
className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center 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 ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'} }`}
`}
> >
{checked && ( {checked && <FiCheck className="text-white text-xs" />}
<FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
)}
</div> </div>
<span>Signature will be used by default</span>
<p className="text-sm text-gray-700 opacity-80 ms-1">
Signature will be used by default.
</p>
</label> </label>
{/* Caption text below */}
</div> </div>
{/* Footer Buttons in Main Area */} {/* Footer Buttons - Fixed */}
<div className="p-4 border-t border-gray-200 flex justify-end gap-3"> <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 <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)} onClick={() => setShowAddSignature?.(false)}
disabled={isSubmitting} disabled={isSubmitting}
> >
CANCEL CANCEL
</button> </button>
<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} onClick={handleSubmit}
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting ? ( {isSubmitting ? (
<> <>
<FaSpinner className="animate-spin" /> <FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
{isEditMode ? 'UPDATING...' : 'CREATING...'} <span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
</> </>
) : ( ) : (
isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' <span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span>
)} )}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default AddSignatureModal; export default AddSignatureModal;

22
src/components/setting/Signature/DrawSignatureCanvas.tsx
View File

@ -224,20 +224,20 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="mb-6"> <div className="mb-2 lg:mb-6">
<h2 className="text-xl font-semibold text-gray-900 mb-2">Draw Signature</h2> <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-sm text-gray-600">Create your signature by drawing directly on the canvas</p> <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>
<div className="flex-1 flex flex-col"> <div className="flex-1 overflow-y-auto">
<div className="grid grid-cols-12 gap-6 mb-2"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
{/* Full Signature Canvas */} {/* Full Signature Canvas */}
<div className="col-span-8"> <div className="lg:col-span-8">
<label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label> <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"> <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
<canvas <canvas
ref={canvasRef1} ref={canvasRef1}
className="w-full h-48 cursor-crosshair" className="w-full h-51 cursor-crosshair"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
@ -247,12 +247,12 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
</div> </div>
{/* Initials Canvas */} {/* 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> <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"> <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
<canvas <canvas
ref={canvasRef2} ref={canvasRef2}
className="w-full h-48 cursor-crosshair" className="w-full h-51 cursor-crosshair"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
@ -263,7 +263,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
</div> </div>
{/* Controls */} {/* Controls */}
<div className="flex gap-4"> <div className="flex gap-4 mt-3">
<button <button
className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors" className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
onClick={clearCanvas} onClick={clearCanvas}

63
src/components/setting/Signature/Signature.tsx
View File

@ -30,6 +30,15 @@ const SignatureManager: React.FC = () => {
const [showAddSignature, setShowAddSignature] = useState<boolean>(false); const [showAddSignature, setShowAddSignature] = useState<boolean>(false);
const [editingSignature, setEditingSignature] = useState<Signature | null>(null); 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 () => { const getAllSignatures = async () => {
setLoading(true) setLoading(true)
try { try {
@ -100,6 +109,34 @@ const SignatureManager: React.FC = () => {
setEditingSignature(null); 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 ( return (
<> <>
{loading ? <div className=' flex items-center justify-center'> {loading ? <div className=' flex items-center justify-center'>
@ -126,7 +163,9 @@ const SignatureManager: React.FC = () => {
</div> </div>
{/* Table Card */} {/* Table Card */}
<div className="bg-white rounded-md overflow-hidden border border-gray-100">
<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 */} {/* Table Header */}
<div className="bg-gray-50 border-b border-gray-200 "> <div className="bg-gray-50 border-b border-gray-200 ">
<div className="grid grid-cols-12 gap-4 px-6 py-4"> <div className="grid grid-cols-12 gap-4 px-6 py-4">
@ -154,13 +193,17 @@ const SignatureManager: React.FC = () => {
Signed by: Signed by:
</div> </div>
{/* Signature Image */} {/* Signature Image or Name/Initials */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center"> <div className="bg-white rounded-lg p-1 flex items-center justify-center">
{signature?.signatureType !== 'SELECT' ? (
<img <img
src={`data:${signature.signatureMimeType};base64,${signature.signatureBlob}`} src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
className="h-[50px] w-[250px] object-contain" className="h-[50px] w-[250px] object-contain"
alt="Signature" alt="Signature"
/> />
) : (
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'name')
)}
</div> </div>
{/* Signature ID */} {/* Signature ID */}
@ -168,6 +211,7 @@ const SignatureManager: React.FC = () => {
{signature.signatureHash} {signature.signatureHash}
</div> </div>
</div> </div>
</div> </div>
{/* Initial Column */} {/* Initial Column */}
@ -178,14 +222,19 @@ const SignatureManager: React.FC = () => {
Initials Initials
</div> </div>
{/* Signature Image */} {/* Signature Initials: Image or Generated Text */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center"> <div className="bg-white rounded-lg p-1 flex items-center justify-center">
{signature?.signatureType !== 'SELECT' ? (
<img <img
src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`} src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
className="h-[50px] object-contain" className="h-[50px] object-contain"
alt="DS Signature" alt="Initials"
/> />
) : (
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'initials')
)}
</div> </div>
{/* Initial ID */} {/* Initial ID */}
<div className="text-xs text-gray-500 truncate"> <div className="text-xs text-gray-500 truncate">
{signature.initialsHash} {signature.initialsHash}
@ -193,6 +242,7 @@ const SignatureManager: React.FC = () => {
</div> </div>
</div> </div>
{/* Actions Column */} {/* Actions Column */}
<div className="col-span-2 flex justify-between items-start pt-9 ps-8 "> <div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
<div className="relative "> <div className="relative ">
@ -206,7 +256,7 @@ const SignatureManager: React.FC = () => {
{/* Dropdown Menu */} {/* Dropdown Menu */}
{activeDropdown === signature.id && ( {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"> <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 <button
onClick={() => handleEdit(signature.id)} 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" 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"
@ -229,6 +279,7 @@ const SignatureManager: React.FC = () => {
))} ))}
</div> </div>
</div> </div>
</div>
{/* Empty State (if no signatures) */} {/* Empty State (if no signatures) */}
{signatures.length === 0 && ( {signatures.length === 0 && (

35
src/components/setting/UserProfile.tsx
View File

@ -1,4 +1,5 @@
import { FiX, FiEdit2 } from 'react-icons/fi'; import { FiX, FiEdit2 } from "react-icons/fi";
interface Account { interface Account {
id: number; id: number;
isDefault: boolean; isDefault: boolean;
@ -7,7 +8,7 @@ interface Account {
interface UserData { interface UserData {
id: number; id: number;
name:string name: string;
email: string; email: string;
language: string; language: string;
account: Account; account: Account;
@ -16,47 +17,41 @@ interface UserData {
interface UserProfileProps { interface UserProfileProps {
userData: UserData; userData: UserData;
} }
const UserProfile: React.FC<UserProfileProps> = ({ userData }) => { const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
};
return ( return (
<div className="bg-white rounded-md shadow-sm flex w-full p-6"> <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 */} {/* Profile Picture */}
<div className="flex-shrink-0 text-center"> <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"> <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()} {userData.name.slice(0, 2).toUpperCase()}
</div> </div>
</div> </div>
{/* Info Fields */} {/* Info Fields */}
<div className="flex flex-col justify-center flex-1 ms-10"> <div className="flex flex-col justify-center flex-1 w-full">
{/* Row: Name */} {/* Row: Name */}
<div className="flex py-1"> <div className="flex flex-col sm:flex-row py-1">
<div className="text-gray-500 font-medium text-[13px] w-32">Name</div> <div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
<div className="text-gray-400 font-medium text-[13px]"> <div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
{userData.name}
</div>
</div> </div>
{/* Row: Email */} {/* Row: Email */}
<div className="flex py-1"> <div className="flex flex-col sm:flex-row py-1">
<div className="text-gray-500 font-medium text-[13px] w-32">Email</div> <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 className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
</div> </div>
{/* Row: Account Name */} {/* Row: Account Name */}
<div className="flex py-1"> <div className="flex flex-col sm:flex-row py-1">
<div className="text-gray-500 font-medium text-[13px] w-32">Account name</div> <div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
<div className="text-gray-400 font-medium text-[13px]"> <div className="text-gray-400 font-medium text-[13px]">
{userData.account.name} {userData.account.name}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default UserProfile export default UserProfile;

28
src/components/templates/TemplateTable.tsx
View File

@ -41,6 +41,34 @@ const TemplateTable = () => {
}, [activeAccountId]) }, [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) => { const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleString(); return new Date(timestamp * 1000).toLocaleString();
}; };

16
src/components/templates/Templates.tsx
View File

@ -28,6 +28,8 @@ const Templates = () => {
const filters = ["All", "My Templates", "Shared"]; const filters = ["All", "My Templates", "Shared"];
const handleAddTemplate = async () => { const handleAddTemplate = async () => {
console.log("handleAddTemplate called"); console.log("handleAddTemplate called");
try { try {
@ -47,9 +49,9 @@ const Templates = () => {
return ( return (
<div className="p-3 text-sm"> <div className="p-3 text-sm">
{/* Header */} {/* 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 */} {/* Filter as pill buttons */}
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
{filters.map((filter) => ( {filters.map((filter) => (
<button <button
key={filter} key={filter}
@ -65,17 +67,19 @@ const Templates = () => {
))} ))}
</div> </div>
{/* Add Template Button */}
<div <div
onClick={handleAddTemplate} 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"> 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" /> >
<button <IoMdAdd className="text-white text-lg" />
className="text-white rounded text-sm hover:opacity-90"> <button className="text-white text-sm font-medium">
Add Template Add Template
</button> </button>
</div> </div>
</div> </div>
{/* Table */} {/* Table */}
<section className="my-4 mx-3"></section> <section className="my-4 mx-3"></section>
<TemplateTable /> <TemplateTable />

84
src/components/transactions/AuditModal.tsx
View File

@ -126,11 +126,12 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
]; ];
const getActionIcon = (action: string) => { const getActionIcon = (action: string) => {
const icons = { const icons = {
'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />, 'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
'SENT': <FiSend className="w-4 h-4" />, 'SENT': <FiSend className="w-4 h-4" />,
'INVITED': <FiMail 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_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />, 'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'VIEWED': <FiEye className="w-4 h-4" />, 'VIEWED': <FiEye className="w-4 h-4" />,
@ -148,7 +149,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
'REASSIGNED': <FiUserPlus className="w-4 h-4" />, 'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
'EDITED': <FiEdit 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" />; return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
}; };
@ -218,15 +219,12 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
}; };
return ( return (
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50"> <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 max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col"> <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 */} {/* 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 justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
<div className="flex items-center"> <h2 className="text-base sm:text-lg md:text-xl font-semibold text-white">Audit Status</h2>
<h2 className="text-xl font-semibold text-white">
Audit Status
</h2>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
className="text-white cursor-pointer transition-colors hover:text-gray-200" className="text-white cursor-pointer transition-colors hover:text-gray-200"
@ -237,74 +235,57 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
{/* Content */} {/* Content */}
<div className="flex-1 overflow-y-auto p-4 no-scrollbar"> <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
{/* {loading ? <LoaderUi /> : ""} */} {auditStatus.length ? (
{auditStatus.length ? <div className="space-y-3">
<div className="space-y-1.5">
{/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
{auditStatus.map((item, index) => ( {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 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)} mt-1`}> <div className={`${getActionColor(item.action.toUpperCase())} mt-1`}>
{getActionIcon(item.action)} {getActionIcon(item.action.toUpperCase())}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p> <p className="text-gray-600 font-medium text-xs sm:text-xs mb-1">
{item.message}
<div className="flex items-center space-x-2 text-xs text-gray-600 mb-1"> </p>
<div className="flex flex-wrap items-center space-x-2 text-xs text-gray-600 mb-1">
<span>Action: {item.action}</span> <span>Action: {item.action}</span>
{extractEmailFromMessage(item.message) && ( {extractEmailFromMessage(item.message) && (
<> <>
<span>•</span> <span className="hidden sm:inline">•</span>
<span className="text-blue-600">{extractEmailFromMessage(item.message)}</span> <span className="text-blue-600">
{extractEmailFromMessage(item.message)}
</span>
</> </>
)} )}
</div> </div>
<div className="flex items-center space-x-2 mb-2"> <div className="flex flex-wrap items-center space-x-2 mb-2 text-xs text-gray-600">
<span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}> <span>Status:</span>
<span className={`px-2 py-0.5 rounded-full ${getStatusBadge(item.status)}`}>
{item.status} {item.status}
</span> </span>
<span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span> <span className="text-gray-500">{formatTimestamp(item.timestamp)}</span>
{item.language && ( {item.language && (
<span className="text-xs text-gray-400 uppercase">{item.language}</span> <span className="text-gray-400 uppercase">{item.language}</span>
)} )}
</div> </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>
))} ))}
</div> : </div>
<div className="flex justify-center items-center"> ) : (
<div className="flex justify-center items-center h-full">
<img <img
src={logoRecord} src={logoRecord}
alt="Record Not Found" 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>
} )}
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50"> <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50 text-sm">
<div className="text-sm text-gray-600"> <div className="text-gray-600">
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''} Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
</div> </div>
<button <button
@ -316,6 +297,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
</div> </div>
</div> </div>
</div> </div>
); );
}; };

95
src/components/transactions/TransactionView.tsx
View File

@ -91,7 +91,7 @@ const TransactionView = () => {
const fetchDocuments = async () => { const fetchDocuments = async () => {
try { 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) { if (res?.status === 200) {
let resDoc = res?.data let resDoc = res?.data
setDocumentsData(resDoc) setDocumentsData(resDoc)
@ -112,15 +112,27 @@ const TransactionView = () => {
window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`) 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 ( return (
<> <>
{transactionDetails && {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='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="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto"> <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 */} {/* Header */}
<h1 className='text-lg font-semibold text-gray-800'> <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> </h1>
<div className='mt-2'> <div className='mt-2'>
@ -170,38 +182,55 @@ const TransactionView = () => {
{/* Recipients List */} {/* Recipients List */}
{transactionDetails.recipients.map((recipient, index) => ( {transactionDetails.recipients.map((recipient, index) => (
<div key={index}> <div key={index}>
<div className='mt-2 flex justify-between items-center'> <div className="mt-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 ">
<div className='flex gap-8 items-center'>
{/* <p className='text-slate-600'>{index+1}</p> */} {/* Left section: recipient info */}
<div className="flex flex-col sm:flex-row gap-4 sm:items-center">
<div> <div>
<p className='text-slate-600 font-semibold'>{recipient.name}</p> <p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p>
<p className='text-slate-600'>{recipient.email}</p> <p className="text-slate-600 text-xs sm:text-xs">{recipient.email}</p>
{recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>} {recipient.hostEmail && (
<p className="text-xs text-gray-500 italic">
<strong>Host:</strong> {recipient.hostEmail}
</p>
)}
</div> </div>
</div> </div>
<div className='flex flex-col leading-4.5 items-start text-md text-slate-600'> {/* Right section: status and actions */}
<div className='flex gap-3 items-center relative'> <div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
<div className='flex gap-1 items-center relative'> <div className="flex flex-wrap gap-3 items-center relative">
<AiFillSignature className='absolute left-[-30px] text-[1rem]' /> <div className="pl-6 relative">
<p className='text-black font-semibold'>{recipient.status}</p> <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> </div>
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
<p {recipient.email === user.email && recipient.status !== "COMPLETED" && (
<button
onClick={() => handleNavigateToSign(recipient.id)} 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 Sign
</p>} </button>
)}
</div> </div>
{recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
{/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'> {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 View signed location
</a> */} </a>
)} */}
</div> </div>
</div> </div>
<hr className='my-2 border-slate-200' />
<hr className="my-3 border-slate-200" />
</div> </div>
))} ))}
</div> </div>
} }
@ -219,18 +248,24 @@ const TransactionView = () => {
</div>} </div>}
</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) => ( {documentsData.map((docsD, index) => (
<div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}> <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
<p>{docsD.name}</p> <p>{docsD.name}</p>
<div className='border-3 rounded-sm border-slate-300 relative text-xs'> <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
{docsD?.pages[0]?.src ? {docsD?.thumbnail ? (
<img style={{ width: "200px", height: "160px" }} src={docsD?.pages[0]?.src} alt="" loading='lazy'/> <img
: style={{ width: "200px", height: "160px" }}
<FaFile className='h-35 w-20 mx-5 text-gray-300' />} 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]'> <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'> <p className='text-[0.7rem] text-slate-500 flex justify-end items-center'>
<span> 1 of {docsD?.pages?.length}</span> {/* <span> 1 of {docsD?.pages?.length}</span> */}
<span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span> <span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
</p> </p>

12
src/index.css
View File

@ -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 CSS */
.sortable-ghost { .sortable-ghost {