Compare commits
No commits in common. "master" and "bhagwanSingh" have entirely different histories.
master
...
bhagwanSin
File diff suppressed because it is too large
Load Diff
36
src/App.tsx
36
src/App.tsx
|
|
@ -14,12 +14,18 @@ import SignDocument from "./components/client/SignDocument";
|
|||
import Transactions from "./components/transactions/Transactions";
|
||||
import ProtectedRoute from "./components/routes_helper/ProtectedRoute";
|
||||
|
||||
import { HashRouter } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { fetchUserDetails } from "./store/slices/userSlice";
|
||||
import { AppDispatch, RootState } from "./store/store";
|
||||
import { useEffect, useLayoutEffect } from "react";
|
||||
|
||||
import Setting from "./components/setting/Setting";
|
||||
import Accounts from "./components/accounts/Accounts";
|
||||
import Account from "./components/accounts/Account";
|
||||
import TransactionView from "./components/transactions/TransactionView";
|
||||
import Templates from "./components/templates/Templates";
|
||||
import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen";
|
||||
import AccountTransactionWrapper from "./components/AccountTransactionWrapper";
|
||||
import SigningOrderDiagram from "./SigningOrderDiagram ";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
|
|
@ -35,26 +41,22 @@ const App = () => {
|
|||
</ProtectedRoute>
|
||||
}>
|
||||
<Route path="/" element={<Home />} />
|
||||
{/* <Route path="/s/settings" element={<Setting />} /> */}
|
||||
{/* <Route element={<AccountTransactionWrapper />}> */}
|
||||
<Route path="/templates" element={<Home />} />
|
||||
|
||||
<Route element={<AccountTransactionWrapper />}>
|
||||
<Route path="/accounts" element={<Accounts />} />
|
||||
<Route path="/accounts/:accountId/transactions" element={<Account />} />
|
||||
<Route path="/transactions" element={<Account />} />
|
||||
<Route path="/accounts/:accountId/transactions/:transactionId" element={<TransactionView />} />
|
||||
<Route path="/transactions/:filterParam" element={<Transactions />} />
|
||||
<Route path="/templates" element={<Templates />} />
|
||||
{/* </Route> */}
|
||||
</Route>
|
||||
|
||||
<Route path="/s/:page1" element={<Setting />} />
|
||||
</Route>
|
||||
|
||||
<Route path="/process-step-one/:accountId/:transactionId" element={
|
||||
<ProtectedRoute>
|
||||
<ProcessStepOne />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
<Route path="/process-step-one/:accountId/template/:templateId" element={
|
||||
|
||||
|
||||
<Route path="/process-step-one/:accountId/:transactionId" element={
|
||||
<ProtectedRoute>
|
||||
<ProcessStepOne />
|
||||
</ProtectedRoute>
|
||||
|
|
@ -66,18 +68,14 @@ const App = () => {
|
|||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
<Route path="/document-completion-screen/:accountId/:transactionId" element={
|
||||
<ProtectedRoute>
|
||||
<DocumentCompletionScreen />
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
{/* Links work wothout Login */}
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
<Route path="/sign/:recipientId" element={<SignDocument />} />
|
||||
<Route path="/view" element={<DocView />} />
|
||||
|
||||
<Route path="/SigningOrderDiagram" element={<SigningOrderDiagram />} />
|
||||
|
||||
{/* Links work wothout Login */}
|
||||
</Routes>
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
|
|||
) || -1;
|
||||
|
||||
return (
|
||||
<div className="relative p-8 bg-white rounded-b-lg max-w-max max-h-[60vh] overflow-auto">
|
||||
<div className="relative p-8 bg-white max-w-max">
|
||||
{/* Single mail icon on top */}
|
||||
<div className="flex justify-center items-center gap-4">
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
|
|||
<div className="w-16 border-1 border-dotted border-slate-200 "></div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center space-x-6 ">
|
||||
<div className="flex items-center justify-center space-x-6">
|
||||
{sortedOrders.map((order, index) => (
|
||||
<React.Fragment key={order}>
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
|
||||
import { Outlet } from 'react-router-dom'
|
||||
// import AccountNav from './accounts/AccountNav'
|
||||
import CommonNav from './CommonNav'
|
||||
import AccountNav from './accounts/AccountNav'
|
||||
|
||||
const AccountTransactionWrapper = () => {
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<CommonNav />
|
||||
<AccountNav />
|
||||
<Outlet />
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,411 +0,0 @@
|
|||
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 api from '../config/api';
|
||||
|
||||
|
||||
interface AccountNavProps {
|
||||
accountName?: string | null;
|
||||
transactionName?: string | null;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface AccountDataArray {
|
||||
userId: number,
|
||||
userEmail: string,
|
||||
name: string,
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
// Helper function to dispatch custom storage event
|
||||
const dispatchSessionStorageChange = (key: string, newValue: any) => {
|
||||
window.dispatchEvent(new CustomEvent('sessionStorageChange', {
|
||||
detail: { key, newValue }
|
||||
}));
|
||||
};
|
||||
|
||||
const CommonNav: React.FC<AccountNavProps> = () => {
|
||||
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [accountsOpen, setAccountsOpen] = useState(false);
|
||||
const [loadingAccounts, setLoadingAccounts] = useState(false);
|
||||
const [accounts, setAccounts] = useState<AccountDataArray[]>([]);
|
||||
const [hasModalBeenClosed, setHasModalBeenClosed] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: 0,
|
||||
name: "",
|
||||
email: "",
|
||||
language: "",
|
||||
account: {
|
||||
id: 0,
|
||||
isDefault: false,
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("user", user)
|
||||
const getAccountDetails = async () => {
|
||||
try {
|
||||
let res = await api.get('/api/user/accounts');
|
||||
let items = res?.data;
|
||||
console.log('items', items);
|
||||
|
||||
const cleanedData: AccountDataArray[] = items.map((item: any) => ({
|
||||
userId: item.userId,
|
||||
userEmail: item.userEmail,
|
||||
name: item.name,
|
||||
accountId: item.accountId,
|
||||
accountName: item.accountName,
|
||||
role: item.role,
|
||||
status: item.status,
|
||||
}));
|
||||
|
||||
setAccounts(cleanedData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountsClick = async () => {
|
||||
setAccountsOpen(!accountsOpen);
|
||||
|
||||
if (!accountsOpen) {
|
||||
setLoadingAccounts(true);
|
||||
|
||||
if (accounts.length === 0 || hasModalBeenClosed) {
|
||||
await getAccountDetails();
|
||||
setHasModalBeenClosed(false);
|
||||
}
|
||||
|
||||
setLoadingAccounts(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountSwitch = (account: any) => {
|
||||
console.log("handleAccountSwitch", account);
|
||||
|
||||
// Update sessionStorage
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
|
||||
|
||||
// Dispatch custom event
|
||||
dispatchSessionStorageChange('activeAccountId', account.accountId);
|
||||
|
||||
// Update user state
|
||||
|
||||
setUser({
|
||||
id: account.userId,
|
||||
name: account.name,
|
||||
email: account.userEmail,
|
||||
language: "", // set it if available
|
||||
account: {
|
||||
id: account.accountId,
|
||||
isDefault: false, // update as needed
|
||||
name: account.accountName,
|
||||
},
|
||||
});
|
||||
|
||||
sessionStorage.setItem('userDetails', JSON.stringify({
|
||||
id: account.userId,
|
||||
name: account.name,
|
||||
email: account.userEmail,
|
||||
language: "", // set it if available
|
||||
account: {
|
||||
id: account.accountId,
|
||||
isDefault: false, // update as needed
|
||||
name: account.accountName,
|
||||
},
|
||||
}));
|
||||
|
||||
setAccountsOpen(false);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
const item = res?.data;
|
||||
if (item) {
|
||||
const userData = {
|
||||
id: item?.id,
|
||||
name : item?.firstName + " " + item?.lastName ,
|
||||
email: item?.email,
|
||||
language: "",
|
||||
account: {
|
||||
id: item?.account.id,
|
||||
isDefault: false,
|
||||
name: item?.account.name,
|
||||
},
|
||||
};
|
||||
|
||||
console.log("userData",userData)
|
||||
|
||||
setUser(userData);
|
||||
sessionStorage.setItem('userDetails', JSON.stringify(userData));
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
|
||||
|
||||
// Dispatch event for initial load
|
||||
dispatchSessionStorageChange('activeAccountId', userData.account.id);
|
||||
|
||||
console.log("Data is saved in sessionStorage");
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeAccountId) {
|
||||
getUserDetails();
|
||||
} else {
|
||||
setUser(userDetails);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const rawPathnames = location.pathname
|
||||
.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) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
if (open) {
|
||||
setHasModalBeenClosed(true);
|
||||
}
|
||||
setOpen(false);
|
||||
setAccountsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [open]);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
let res = await api.post('/api/auth/logout');
|
||||
if (res.status === 200) {
|
||||
sessionStorage.clear();
|
||||
setOpen(false);
|
||||
navigate("/login");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMainDropdownToggle = () => {
|
||||
if (open) {
|
||||
setHasModalBeenClosed(true);
|
||||
}
|
||||
setOpen(!open);
|
||||
if (!open) {
|
||||
setAccountsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSegment = (segment: string) =>
|
||||
segment
|
||||
.replace(/[-_]/g, " ")
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
return (
|
||||
<header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm 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">Dashboard</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>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
<button
|
||||
className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
|
||||
onClick={handleMainDropdownToggle}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover p-1.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
</span>
|
||||
) : (
|
||||
<FaUser className="text-lg" />
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
|
||||
<div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
</span>
|
||||
) : (
|
||||
<FaUser className="text-lg" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-gray-900 truncate">{user?.name || '-'}</div>
|
||||
<div className="text-sm text-gray-600 truncate">{user?.email || '-'}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Account #{user?.account?.name || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-gray-100">
|
||||
<button
|
||||
onClick={handleAccountsClick}
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<FaBuilding className="mr-3 text-gray-500" />
|
||||
<span>Switch Account</span>
|
||||
</div>
|
||||
<FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{accountsOpen && (
|
||||
<div className="bg-gray-50 max-h-64 overflow-y-auto">
|
||||
{loadingAccounts ? (
|
||||
<div className="space-y-0">
|
||||
<ShimmerRow />
|
||||
<ShimmerRow />
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-200">
|
||||
{accounts?.length > 0 ? (
|
||||
accounts?.map((account) => (
|
||||
<button
|
||||
key={account.accountId}
|
||||
onClick={() => handleAccountSwitch(account)}
|
||||
className={`w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left`}
|
||||
>
|
||||
<div className={`flex items-center justify-between`}>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs">
|
||||
{account.accountName.slice(0, 2).toUpperCase()}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
|
||||
{account.accountId === activeAccountId && (
|
||||
<FaCheck className="text-green-600 text-xs" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">
|
||||
{account.role}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
|
||||
>
|
||||
<FaSignOutAlt className="mr-3" />
|
||||
<span>Log Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommonNav;
|
||||
|
|
@ -4,20 +4,6 @@ import AccountNav from "./AccountNav";
|
|||
import api from "../../config/api";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { FaCheck } from "react-icons/fa";
|
||||
import Cards from "../home/Cards";
|
||||
import AddInviteModal from "./AddInviteModal";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaClock,
|
||||
FaHourglassHalf,
|
||||
FaTasks,
|
||||
FaChevronDown,
|
||||
FaPlus,
|
||||
FaUserPlus,
|
||||
FaFilter,
|
||||
FaCalendarAlt
|
||||
} from 'react-icons/fa';
|
||||
|
||||
interface Transaction {
|
||||
id: number;
|
||||
|
|
@ -32,173 +18,14 @@ const formatDate = (timestamp: number) => {
|
|||
return new Date(timestamp * 1000).toLocaleString();
|
||||
};
|
||||
|
||||
|
||||
|
||||
const Account = () => {
|
||||
const mapApiDataToCards = (data: any): CardData[] => {
|
||||
return [
|
||||
{
|
||||
title: 'Action Needed',
|
||||
count: data.actionNeeded || 0,
|
||||
icon: <FaTasks size={18} className="text-indigo-600" />,
|
||||
gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
|
||||
shadowColor: 'shadow-indigo-200/50',
|
||||
iconBg: 'bg-indigo-100 border-indigo-200',
|
||||
textColor: 'text-indigo-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Expiring Soon',
|
||||
count: data.expiring || 0,
|
||||
icon: <FaHourglassHalf size={18} className="text-rose-600" />,
|
||||
gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
|
||||
shadowColor: 'shadow-rose-200/50',
|
||||
iconBg: 'bg-rose-100 border-rose-200',
|
||||
textColor: 'text-rose-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Completed',
|
||||
count: data.completed || 0,
|
||||
icon: <FaCheckCircle size={18} className="text-teal-600" />,
|
||||
gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
|
||||
shadowColor: 'shadow-teal-200/50',
|
||||
iconBg: 'bg-teal-100 border-teal-200',
|
||||
textColor: 'text-teal-700',
|
||||
trend: 'up'
|
||||
},
|
||||
// {
|
||||
// title: 'Waiting for Others',
|
||||
// count: data.waitingForOthers || 0,
|
||||
// icon: <FaClock size={18} className="text-stone-600" />,
|
||||
// gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
|
||||
// shadowColor: 'shadow-blue-200/50',
|
||||
// iconBg: 'bg-blue-100 border-blue-200',
|
||||
// textColor: 'text-blue-700',
|
||||
// trend: 'down'
|
||||
// },
|
||||
// {
|
||||
// title: 'declined',
|
||||
// count: data.declined || 0,
|
||||
// icon: <FaClock size={18} className="text-purple-600" />,
|
||||
// gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
|
||||
// shadowColor: 'shadow-purple-200/50',
|
||||
// iconBg: 'bg-purple-100 border-purple-200',
|
||||
// textColor: 'text-purple-700',
|
||||
// trend: 'down'
|
||||
// },
|
||||
// {
|
||||
// title: 'cancelled',
|
||||
// count: data.cancelled || 0,
|
||||
// icon: <FaClock size={18} className="text-green-600" />,
|
||||
// gradient: 'bg-gradient-to-br from-green-50 to-green-100',
|
||||
// shadowColor: 'shadow-green-200/50',
|
||||
// iconBg: 'bg-green-100 border-green-200',
|
||||
// textColor: 'text-green-700',
|
||||
// trend: 'down'
|
||||
// },
|
||||
{
|
||||
title: 'draft',
|
||||
count: data.draft || 0,
|
||||
icon: <FaClock size={18} className="text-stone-600" />,
|
||||
gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
|
||||
shadowColor: 'shadow-stone-200/50',
|
||||
iconBg: 'bg-stone-100 border-stone-200',
|
||||
textColor: 'text-stone-700',
|
||||
trend: 'down'
|
||||
}
|
||||
// Add more cards here if needed
|
||||
];
|
||||
};
|
||||
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
|
||||
|
||||
console.log("activeAccountId Trans.", activeAccountId)
|
||||
// const { accountId } = useParams<{ accountId: string }>();
|
||||
const { accountId } = useParams<{ accountId: string }>();
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
|
||||
const [accountsData, setAccountsData] = useState([])
|
||||
const [inviteLoading, setInviteLoading] = useState(false);
|
||||
const [cards, setCards] = useState<CardData[]>([]);
|
||||
const [accountID, setAccountID] = useState<number>()
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
// const getUserDetails = async () => {
|
||||
// try {
|
||||
// let res = await api.get('/api/user/details')
|
||||
// let accountIDData = res?.data?.account?.id
|
||||
// setAccountID(accountIDData)
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// getUserDetails()
|
||||
// }, [])
|
||||
|
||||
useEffect(() => {
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails'));
|
||||
setCurrentEmailId(userDetails?.email)
|
||||
}, []);
|
||||
|
||||
|
||||
// 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 getDashboardData = async () => {
|
||||
setIsLoading(true)
|
||||
const payload = {
|
||||
account: activeAccountId
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await api.get('/api/dashboard', { params: payload });
|
||||
console.log("Dashboard Data:", res.data);
|
||||
const cardDataArray = mapApiDataToCards(res.data);
|
||||
setCards(cardDataArray);
|
||||
} catch (error) {
|
||||
console.error("Error fetching dashboard data:", error);
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
};
|
||||
|
||||
const fetchTransactions = async () => {
|
||||
console.log("fetchTransactions")
|
||||
try {
|
||||
const response = await api(`/api/accounts/${activeAccountId}/transactions`);
|
||||
const response = await api(`/api/accounts/${accountId}/transactions`);
|
||||
setTransactions(response.data || []);
|
||||
} catch (error) {
|
||||
console.error("Error fetching transactions:", error);
|
||||
|
|
@ -206,80 +33,19 @@ const Account = () => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeAccountId) {
|
||||
getDashboardData()
|
||||
fetchTransactions();
|
||||
}
|
||||
}, [activeAccountId]);
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// if (accountID) fetchTransactions();
|
||||
// }, [accountID]);
|
||||
|
||||
// const getAccountDetails = async () => {
|
||||
// try {
|
||||
// let res = await api.get('/api/user/accounts')
|
||||
// let items = res?.data
|
||||
// setAccountsData(items)
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// getAccountDetails()
|
||||
// }, [])
|
||||
|
||||
if (accountId) fetchTransactions();
|
||||
}, [accountId]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleTransactionClick = (id: number) => {
|
||||
navigate(`/accounts/${activeAccountId}/transactions/${id}`);
|
||||
navigate(`/accounts/${accountId}/transactions/${id}`);
|
||||
};
|
||||
|
||||
const handleInvite = async (data: { i_accountName: number; email: string; role: string }) => {
|
||||
setInviteLoading(true);
|
||||
try {
|
||||
const payloadInvite = {
|
||||
email: data.email,
|
||||
role: data.role
|
||||
}
|
||||
let res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
|
||||
if (res?.data) {
|
||||
toast.success("Invite Sent Successfully...!", {
|
||||
position: "top-center",
|
||||
autoClose: 1500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
await fetchTransactions()
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to invite', err);
|
||||
} finally {
|
||||
setInviteLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
|
||||
isLoading={isLoading} />
|
||||
{transactions.length > 0 && (
|
||||
<div className="overflow-x-auto py-2">
|
||||
<div className="overflow-x-auto py-4">
|
||||
<table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
|
||||
<thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
|
||||
<tr>
|
||||
|
|
@ -289,8 +55,7 @@ const Account = () => {
|
|||
<th className="px-4 py-3 text-center">Active</th>
|
||||
<th className="px-4 py-3 text-center">Last Change</th>
|
||||
<th className="px-4 py-3 text-center">Expire After (days)</th>
|
||||
<th className="px-4 py-3 text-center">Sign</th>
|
||||
<th className="px-4 py-3 text-center">Action</th>
|
||||
<th className="px-4 py-3 text-center"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
|
|
@ -327,9 +92,6 @@ const Account = () => {
|
|||
<td className="px-4 py-3 text-center">
|
||||
{tx.expireAfter ?? "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center ">
|
||||
{tx?.createdBy?.email === currentEmailId ? <button className="px-2 py-0.5 rounded-xl text-xs font-medium bg-green-100 text-green-700 cursor-pointer">Sign now</button> : "-"}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
|
||||
</td>
|
||||
|
|
@ -340,8 +102,6 @@ const Account = () => {
|
|||
</table>
|
||||
</div>
|
||||
)}
|
||||
{isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
|
||||
accountOptions={accountsData} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,405 +1,105 @@
|
|||
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 React, { use, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { FaCog } from 'react-icons/fa';
|
||||
import { IoIosNotifications } from 'react-icons/io';
|
||||
import { RootState } from '../../store/store';
|
||||
import { UserState } from '../../store/slices/userSlice';
|
||||
import api from '../../config/api';
|
||||
|
||||
// const fetchAccountData = async (accountId: string) => {
|
||||
// try {
|
||||
// if(!accountId) return null;
|
||||
// const response = await api.get(`/api/accounts/${accountId}`);
|
||||
// return response.data;
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching account data:", error);
|
||||
// throw error;
|
||||
// }
|
||||
// }
|
||||
|
||||
// const fetchTransactionData = async (accountId: string, transactionId: string) => {
|
||||
// try {
|
||||
// if(!accountId || !transactionId) return null;
|
||||
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
|
||||
// return response.data;
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching account data:", error);
|
||||
// throw error;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
interface AccountNavProps {
|
||||
accountName?: string | null;
|
||||
transactionName?: string | null;
|
||||
accountName: string | null;
|
||||
transactionName: string | null;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface AccountDataArray {
|
||||
userId: number,
|
||||
userEmail: string,
|
||||
name: string,
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
// Helper function to dispatch custom storage event
|
||||
const dispatchSessionStorageChange = (key: string, newValue: any) => {
|
||||
window.dispatchEvent(new CustomEvent('sessionStorageChange', {
|
||||
detail: { key, newValue }
|
||||
}));
|
||||
};
|
||||
|
||||
const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
|
||||
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
|
||||
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
const user: UserState = useSelector((state: RootState) => state.user);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [accountsOpen, setAccountsOpen] = useState(false);
|
||||
const [loadingAccounts, setLoadingAccounts] = useState(false);
|
||||
const [accounts, setAccounts] = useState<AccountDataArray[]>([]);
|
||||
const [hasModalBeenClosed, setHasModalBeenClosed] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||
const initials = user.username
|
||||
? user.username
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase()
|
||||
: 'U';
|
||||
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: 0,
|
||||
name: "",
|
||||
email: "",
|
||||
language: "",
|
||||
account: {
|
||||
id: 0,
|
||||
isDefault: false,
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
console.log("user", user)
|
||||
const getAccountDetails = async () => {
|
||||
try {
|
||||
let res = await api.get('/api/user/accounts');
|
||||
let items = res?.data;
|
||||
console.log('items', items);
|
||||
|
||||
const cleanedData: AccountDataArray[] = items.map((item: any) => ({
|
||||
userId: item.userId,
|
||||
userEmail: item.userEmail,
|
||||
name: item.name,
|
||||
accountId: item.accountId,
|
||||
accountName: item.accountName,
|
||||
role: item.role,
|
||||
status: item.status,
|
||||
}));
|
||||
|
||||
setAccounts(cleanedData);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountsClick = async () => {
|
||||
setAccountsOpen(!accountsOpen);
|
||||
|
||||
if (!accountsOpen) {
|
||||
setLoadingAccounts(true);
|
||||
|
||||
if (accounts.length === 0 || hasModalBeenClosed) {
|
||||
await getAccountDetails();
|
||||
setHasModalBeenClosed(false);
|
||||
}
|
||||
|
||||
setLoadingAccounts(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountSwitch = (account: any) => {
|
||||
console.log("handleAccountSwitch", account);
|
||||
|
||||
// Update sessionStorage
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
|
||||
|
||||
// Dispatch custom event
|
||||
dispatchSessionStorageChange('activeAccountId', account.accountId);
|
||||
|
||||
// Update user state
|
||||
|
||||
setUser({
|
||||
id: account.userId,
|
||||
name: account.name,
|
||||
email: account.userEmail,
|
||||
language: "", // set it if available
|
||||
account: {
|
||||
id: account.accountId,
|
||||
isDefault: false, // update as needed
|
||||
name: account.accountName,
|
||||
},
|
||||
});
|
||||
|
||||
sessionStorage.setItem('userDetails', JSON.stringify({
|
||||
id: account.userId,
|
||||
name: account.name,
|
||||
email: account.userEmail,
|
||||
language: "", // set it if available
|
||||
account: {
|
||||
id: account.accountId,
|
||||
isDefault: false, // update as needed
|
||||
name: account.accountName,
|
||||
},
|
||||
}));
|
||||
|
||||
setAccountsOpen(false);
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
const item = res?.data;
|
||||
if (item) {
|
||||
const userData = {
|
||||
id: item?.id,
|
||||
name : item?.firstName + " " + item?.lastName ,
|
||||
email: item?.email,
|
||||
language: "",
|
||||
account: {
|
||||
id: item?.account.id,
|
||||
isDefault: false,
|
||||
name: item?.account.name,
|
||||
},
|
||||
};
|
||||
|
||||
console.log("userData",userData)
|
||||
|
||||
setUser(userData);
|
||||
sessionStorage.setItem('userDetails', JSON.stringify(userData));
|
||||
sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
|
||||
|
||||
// Dispatch event for initial load
|
||||
dispatchSessionStorageChange('activeAccountId', userData.account.id);
|
||||
|
||||
console.log("Data is saved in sessionStorage");
|
||||
}
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!activeAccountId) {
|
||||
getUserDetails();
|
||||
} else {
|
||||
setUser(userDetails);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const rawPathnames = location.pathname
|
||||
.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) {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
if (open) {
|
||||
setHasModalBeenClosed(true);
|
||||
}
|
||||
setOpen(false);
|
||||
setAccountsOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [open]);
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
let res = await api.post('/api/auth/logout');
|
||||
if (res.status === 200) {
|
||||
sessionStorage.clear();
|
||||
setOpen(false);
|
||||
navigate("/login");
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMainDropdownToggle = () => {
|
||||
if (open) {
|
||||
setHasModalBeenClosed(true);
|
||||
}
|
||||
setOpen(!open);
|
||||
if (!open) {
|
||||
setAccountsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatSegment = (segment: string) =>
|
||||
segment
|
||||
.replace(/[-_]/g, " ")
|
||||
.replace(/\b\w/g, (char) => char.toUpperCase());
|
||||
|
||||
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>
|
||||
);
|
||||
// useEffect(() => {
|
||||
// if (accountId) {
|
||||
// api.get(`/api/accounts/${accountId}`)
|
||||
// .then(response => {
|
||||
// // Handle the account data if needed
|
||||
// console.log(response.data, "Line 29");
|
||||
// })
|
||||
// .catch(error => {
|
||||
// console.error("Error fetching account data:", error);
|
||||
// });
|
||||
// }
|
||||
// }, [accountId, transactionId]);
|
||||
|
||||
return (
|
||||
<header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm 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">Dashboard</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>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</nav>
|
||||
<h1 className="text-md font-medium text-gray-800 capitalize">
|
||||
Account
|
||||
{accountName ? ` > ${accountName}` : ''}
|
||||
{transactionName ? ` > ${transactionName}` : ''}
|
||||
</h1>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="relative" ref={dropdownRef}>
|
||||
{/* <h1 className="text-md font-medium text-gray-800 capitalize">Account</h1> */}
|
||||
|
||||
<div className="flex items-center">
|
||||
{/* Notification + Settings with smaller gap */}
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
|
||||
onClick={handleMainDropdownToggle}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
aria-label="Notifications"
|
||||
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover p-1.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
</span>
|
||||
) : (
|
||||
<FaUser className="text-lg" />
|
||||
)}
|
||||
</div>
|
||||
<IoIosNotifications className="text-xl" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
|
||||
<div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
</span>
|
||||
) : (
|
||||
<FaUser className="text-lg" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-semibold text-gray-900 truncate">{user?.name || '-'}</div>
|
||||
<div className="text-sm text-gray-600 truncate">{user?.email || '-'}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
Account #{user?.account?.name || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
to="/settings"
|
||||
aria-label="Settings"
|
||||
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
||||
>
|
||||
<FaCog className="text-sm" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="border-b border-gray-100">
|
||||
<button
|
||||
onClick={handleAccountsClick}
|
||||
className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<FaBuilding className="mr-3 text-gray-500" />
|
||||
<span>Switch Account</span>
|
||||
</div>
|
||||
<FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
|
||||
{accountsOpen && (
|
||||
<div className="bg-gray-50 max-h-64 overflow-y-auto">
|
||||
{loadingAccounts ? (
|
||||
<div className="space-y-0">
|
||||
<ShimmerRow />
|
||||
<ShimmerRow />
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-200">
|
||||
{accounts?.length > 0 ? (
|
||||
accounts?.map((account) => (
|
||||
<button
|
||||
key={account.accountId}
|
||||
onClick={() => handleAccountSwitch(account)}
|
||||
className={`w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left`}
|
||||
>
|
||||
<div className={`flex items-center justify-between`}>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs">
|
||||
{/* {account.accountName.slice(0, 2).toUpperCase()} */}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
|
||||
{account.accountId === activeAccountId && (
|
||||
<FaCheck className="text-green-600 text-xs" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">
|
||||
{account.role}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-100">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
|
||||
>
|
||||
<FaSignOutAlt className="mr-3" />
|
||||
<span>Log Out</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Avatar with separate spacing */}
|
||||
<div className="w-9 h-9 ms-3 rounded-full overflow-hidden bg-[var(--primary)] flex items-center justify-center text-white font-semibold text-sm">
|
||||
{user.picture ? (
|
||||
<img
|
||||
src={user.picture}
|
||||
alt="User avatar"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
initials
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -407,4 +107,4 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
|
|||
);
|
||||
};
|
||||
|
||||
export default AccountNav;
|
||||
export default AccountNav;
|
||||
|
|
|
|||
|
|
@ -6,10 +6,6 @@ import AccountNav from "./AccountNav";
|
|||
import api from "../../config/api";
|
||||
import { AccountData, AccountStatus, UserRole } from "../../utlity/types";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Cards from "../home/Cards";
|
||||
import AddAccountModal from "./AddAccountModal";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import Loader from "../../helper/Loader";
|
||||
|
||||
// import { UserRole, AccountStatus, AccountData } from "../../types/account";
|
||||
|
||||
|
|
@ -34,16 +30,8 @@ const getStatusLabel = (
|
|||
};
|
||||
|
||||
const Accounts = () => {
|
||||
|
||||
const [allAccounts, setAllAccounts] = useState<AccountData[]>([]);
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<number[]>([]);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [accounts, setAccounts] = useState<string[]>([]);
|
||||
const [openMenuId, setOpenMenuId] = useState<string | null>(null);
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setIsModalOpen(true);
|
||||
};
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -65,65 +53,8 @@ const Accounts = () => {
|
|||
navigate(`/accounts/${id}/transactions`);
|
||||
};
|
||||
|
||||
const handleAddAccount = async (accountName: string) => {
|
||||
try {
|
||||
const payloadAccount = {
|
||||
name: accountName
|
||||
}
|
||||
let res = await api.post(`/api/user/accounts`, payloadAccount)
|
||||
if (res?.data) {
|
||||
toast.success("Account Add Successfully...!", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
await fetchAccounts()
|
||||
setIsModalOpen(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
} finally {
|
||||
}
|
||||
};
|
||||
|
||||
const handleMenuToggle = (accountId: string) => {
|
||||
setOpenMenuId(openMenuId === accountId ? null : accountId);
|
||||
};
|
||||
|
||||
const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
|
||||
try {
|
||||
let response = await api.post(`/api/accounts/${accountId}/accept/invite`)
|
||||
console.log(response)
|
||||
if (response.data.status === 202) {
|
||||
toast.success("Login Successful", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error posting data:', error);
|
||||
} finally {
|
||||
setOpenMenuId(null); // close menu
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <Cards type="account" onOpenModal={handleOpenModal} /> */}
|
||||
{allAccounts.length > 0 && (
|
||||
<div className="overflow-x-auto py-2">
|
||||
<table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
|
||||
|
|
@ -170,38 +101,8 @@ const Accounts = () => {
|
|||
{status.text}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center relative">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleMenuToggle(account.accountId);
|
||||
}}
|
||||
className="mx-auto"
|
||||
aria-label="Actions menu"
|
||||
>
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black" />
|
||||
</button>
|
||||
|
||||
{/* Dropdown menu */}
|
||||
{openMenuId === account.accountId && (
|
||||
<div
|
||||
className="absolute right-13 top-6 mt-1 w-18 bg-white border text-[13px] font-bold border-gray-300 rounded-md shadow-lg z-10"
|
||||
onClick={(e) => e.stopPropagation()} // prevent row click closing
|
||||
>
|
||||
<button
|
||||
className="w-full px-3 py-1 text-left text-green-700 hover:bg-green-100 rounded-t-md cursor-pointer"
|
||||
onClick={() => handleAction(account.accountId, 'accept')}
|
||||
>
|
||||
Accept
|
||||
</button>
|
||||
<button
|
||||
className="w-full px-3 py-1 text-left text-red-700 hover:bg-red-100 rounded-b-md cursor-pointer"
|
||||
onClick={() => handleAction(account.accountId, 'reject')}
|
||||
>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<td className="px-4 py-3 text-center">
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
|
@ -210,8 +111,6 @@ const Accounts = () => {
|
|||
</table>
|
||||
</div>
|
||||
)}
|
||||
{isModalOpen && <AddAccountModal onClose={() => setIsModalOpen(false)}
|
||||
onAddAccount={handleAddAccount} />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
|
||||
interface AddAccountModalProps {
|
||||
onClose: () => void;
|
||||
onAddAccount: (accountName: string) => void;
|
||||
}
|
||||
|
||||
const AddAccountModal: React.FC<AddAccountModalProps> = ({ onClose, onAddAccount }) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const handleAddClick = () => {
|
||||
if (inputValue.trim()) {
|
||||
onAddAccount(inputValue.trim());
|
||||
setInputValue(''); // clear input after submit
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
<h3 className="text-lg font-medium text-gray-800 mb-4">Add New Account</h3>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter account name"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
className="w-full mb-4 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
|
||||
/>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={() => {
|
||||
setInputValue('');
|
||||
onClose();
|
||||
}}
|
||||
className="px-4 py-1.5 text-[13px] cursor-pointer font-semibold text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAddClick}
|
||||
className="px-2 py-1.5 cursor-pointer font-semibold bg-[var(--modalSubmitBG)] text-[13px] text-white hover:bg-[var(--modalSubmitBGHover)] rounded-md transition-colors"
|
||||
disabled={!inputValue.trim()}
|
||||
>
|
||||
Add Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddAccountModal;
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
import { useRef, useState } from "react";
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import Loader from "../../helper/Loader";
|
||||
|
||||
interface AccountOption {
|
||||
userId: number;
|
||||
userEmail: string;
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface AddInviteModalProps {
|
||||
onClose: () => void;
|
||||
onInvite: (data: { i_accountName: number; email: string; role: string }) => void;
|
||||
accountOptions: AccountOption[];
|
||||
accountOptionsLoading: boolean;
|
||||
inviteLoading: boolean;
|
||||
}
|
||||
|
||||
const AddInviteModal: React.FC<AddInviteModalProps> = ({
|
||||
onClose,
|
||||
onInvite,
|
||||
accountOptions,
|
||||
accountOptionsLoading,
|
||||
inviteLoading,
|
||||
}) => {
|
||||
const [inviteFormData, setInviteFormData] = useState({
|
||||
i_accountName: 0,
|
||||
email: "",
|
||||
role: "",
|
||||
});
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const [accountSearchTerm, setAccountSearchTerm] = useState("");
|
||||
const [selectedAccount, setSelectedAccount] = useState<AccountOption | null>(null);
|
||||
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
|
||||
const [isRoleDropdownOpen, setIsRoleDropdownOpen] = useState(false);
|
||||
const accountDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const roleDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const roles = ["ADMIN", "EDITOR", "VIEWER"];
|
||||
|
||||
// Handlers
|
||||
const handleInviteChange = (field: keyof typeof inviteFormData, value: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, [field]: value }));
|
||||
if (errors[field]) {
|
||||
setErrors((prev) => ({ ...prev, [field]: "" }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountDropdownFocus = () => setIsAccountDropdownOpen(true);
|
||||
const handleRoleDropdownFocus = () => setIsRoleDropdownOpen(true);
|
||||
|
||||
const handleDropdownBlur = (
|
||||
e: React.FocusEvent<HTMLDivElement>,
|
||||
ref: React.RefObject<HTMLDivElement>,
|
||||
setOpen: (open: boolean) => void
|
||||
) => {
|
||||
setTimeout(() => {
|
||||
const active = document.activeElement as HTMLElement;
|
||||
if (ref.current && !ref.current.contains(active)) {
|
||||
setOpen(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const handleAccountSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = e.target.value;
|
||||
setAccountSearchTerm(val);
|
||||
setSelectedAccount(null);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: 0 }));
|
||||
};
|
||||
|
||||
const handleAccountSelect = (option: AccountOption) => {
|
||||
setSelectedAccount(option);
|
||||
setAccountSearchTerm(option.accountName);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: option.accountId }));
|
||||
setIsAccountDropdownOpen(false);
|
||||
setErrors((prev) => ({ ...prev, i_accountName: "" }));
|
||||
};
|
||||
|
||||
const handleRoleSelect = (role: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, role }));
|
||||
setIsRoleDropdownOpen(false);
|
||||
setErrors((prev) => ({ ...prev, role: "" }));
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
const { i_accountName, email, role } = inviteFormData;
|
||||
const errs: { [key: string]: string } = {};
|
||||
if (!i_accountName) errs.i_accountName = "Account is required";
|
||||
if (!email.trim()) errs.email = "Email is required";
|
||||
else if (!/\S+@\S+\.\S+/.test(email)) errs.email = "Invalid email";
|
||||
if (!role.trim()) errs.role = "Role is required";
|
||||
|
||||
if (Object.keys(errs).length > 0) {
|
||||
setErrors(errs);
|
||||
return;
|
||||
}
|
||||
|
||||
onInvite(inviteFormData);
|
||||
};
|
||||
|
||||
const filteredOptions = accountOptions.filter((option) =>
|
||||
option.accountName.toLowerCase().includes(accountSearchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<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-[26rem]">
|
||||
<h3 className="text-lg font-medium text-gray-800 mb-4">Send Invite</h3>
|
||||
|
||||
{/* Account Name Dropdown */}
|
||||
<div className="mb-3 relative" onBlur={(e) => handleDropdownBlur(e, accountDropdownRef, setIsAccountDropdownOpen)}>
|
||||
<label className="text-sm font-medium text-gray-600 mb-1 block">Account</label>
|
||||
<div ref={accountDropdownRef}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={accountOptionsLoading ? "Loading..." : "Select or search account"}
|
||||
value={accountSearchTerm}
|
||||
onChange={handleAccountSearchChange}
|
||||
onFocus={handleAccountDropdownFocus}
|
||||
disabled={accountOptionsLoading}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
{isAccountDropdownOpen && !accountOptionsLoading && (
|
||||
<ul className="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 shadow-lg max-h-40 overflow-auto">
|
||||
{filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((opt) => (
|
||||
<li
|
||||
key={opt.accountId}
|
||||
className="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||
onMouseDown={() => handleAccountSelect(opt)}
|
||||
>
|
||||
{opt.accountName}
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-3 py-2 text-gray-500 text-sm">No results found</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{errors.i_accountName && <p className="text-sm text-red-500 mt-1">{errors.i_accountName}</p>}
|
||||
</div>
|
||||
|
||||
{/* Email Field */}
|
||||
<div className="mb-3">
|
||||
<label className="text-sm font-medium text-gray-600 mb-1 block">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter email"
|
||||
value={inviteFormData.email}
|
||||
onChange={(e) => handleInviteChange("email", e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
{errors.email && <p className="text-sm text-red-500 mt-1">{errors.email}</p>}
|
||||
</div>
|
||||
|
||||
{/* Role Dropdown */}
|
||||
<div className="mb-4 relative" onBlur={(e) => handleDropdownBlur(e, roleDropdownRef, setIsRoleDropdownOpen)}>
|
||||
<label className="text-sm font-medium text-gray-600 mb-1 block">Role</label>
|
||||
<div ref={roleDropdownRef}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Select role"
|
||||
value={inviteFormData.role}
|
||||
readOnly
|
||||
onFocus={handleRoleDropdownFocus}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
{isRoleDropdownOpen && (
|
||||
<div className="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 shadow-lg">
|
||||
{roles.map((role) => (
|
||||
<div
|
||||
key={role}
|
||||
className="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||
onMouseDown={() => handleRoleSelect(role)}
|
||||
>
|
||||
{role}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.role && <p className="text-sm text-red-500 mt-1">{errors.role}</p>}
|
||||
</div>
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-1.5 text-[13px] font-semibold text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="px-4 py-1.5 text-[13px] font-semibold bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] rounded-md transition-colors flex items-center gap-1"
|
||||
disabled={inviteLoading}
|
||||
>
|
||||
{inviteLoading && <FaSpinner className="animate-spin text-sm" />}
|
||||
Invite
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddInviteModal;
|
||||
|
|
@ -11,7 +11,7 @@ import { Bounce, toast } from "react-toastify";
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
|
||||
|
||||
import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck } from 'react-icons/fa'
|
||||
import { FaRegImage, FaFileAlt, FaSignature, FaStamp } from 'react-icons/fa'
|
||||
import { IoIosDocument } from 'react-icons/io'
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md'
|
||||
import { TbChevronsDownLeft, TbSignature } from "react-icons/tb";
|
||||
|
|
@ -100,30 +100,6 @@ export interface StampTypeObj {
|
|||
blob: string;
|
||||
}
|
||||
|
||||
interface FIT {
|
||||
label: string,
|
||||
value: number | null
|
||||
}
|
||||
|
||||
const fitObj = [
|
||||
{
|
||||
label: "Fit",
|
||||
value: "FIT"
|
||||
},
|
||||
{
|
||||
label: "50%",
|
||||
value: "50"
|
||||
},
|
||||
{
|
||||
label: "150%",
|
||||
value: "150"
|
||||
},
|
||||
{
|
||||
label: "200%",
|
||||
value: "200"
|
||||
},
|
||||
]
|
||||
|
||||
// Functions - LIST
|
||||
// handleSignClick - Handle when sign || Initial tag got clicked
|
||||
// fetchData - Fetch document images and tags data
|
||||
|
|
@ -150,9 +126,6 @@ const SignDocument = () => {
|
|||
// Show is fields - Showing all fields There
|
||||
const [isFields, setIsFields] = useState<boolean>(true);
|
||||
|
||||
const [isFitDd, setIsFitDd] = useState<boolean>(false)
|
||||
const [selFitIndx, setSelFitIndx] = useState<number>(0);
|
||||
|
||||
const globalLoader = useSelector((state: RootState) => state.loader)
|
||||
|
||||
const [openSign, setOpenSign] = useState<boolean>(false);
|
||||
|
|
@ -173,21 +146,6 @@ const SignDocument = () => {
|
|||
|
||||
const [signConfObj, setSignConfObj] = useState<SignConfTypeObj | {}>({});
|
||||
|
||||
const zoom = (percentage: number, contentClass: string) => {
|
||||
const content = document.querySelector(`.${contentClass}`);
|
||||
if (content) {
|
||||
(content as HTMLElement).style.zoom = `${percentage}%`;
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let indx = fitObj[selFitIndx].value
|
||||
if (indx === "FIT") {
|
||||
indx = "100";
|
||||
}
|
||||
zoom(Number(indx), 'zoom-con')
|
||||
}, [selFitIndx])
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(showLoader("Loading ..."));
|
||||
fetchData();
|
||||
|
|
@ -204,10 +162,9 @@ const SignDocument = () => {
|
|||
console.log(saved, "Line 162")
|
||||
|
||||
useEffect(() => {
|
||||
if (recSignStatus === "COMPLETED") {
|
||||
if (recSignStatus === "COMPLETE") {
|
||||
console.log("SETTING HIDE TAGS to TRUE LIne 161")
|
||||
// setHideTags(true);
|
||||
setTransparentTags(true);
|
||||
setHideTags(true);
|
||||
} else {
|
||||
console.log("SETTING HIDE TAGS to TRUE LIne 161")
|
||||
setHideTags(false);
|
||||
|
|
@ -490,31 +447,13 @@ const SignDocument = () => {
|
|||
// }
|
||||
// }
|
||||
|
||||
const fetchSignatureData = async (signatureId: string) => {
|
||||
try {
|
||||
const response = await axios.get(`${import.meta.env.VITE_BASE_URI}/api/sign/signatures/${signatureId}`, {
|
||||
headers: { "ngrok-skip-browser-warning": "69420" }
|
||||
});
|
||||
if (response.status === 200) {
|
||||
return response.data.signature;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching signature data:", error);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (tagJson) {
|
||||
for (const tag of tagJson) {
|
||||
if (tag.type === "SIGNATURE" && "value" in tag) {
|
||||
const signatureData = await fetchSignatureData(tag.value);
|
||||
console.log(signatureData);
|
||||
}
|
||||
}
|
||||
if (tagJson) {
|
||||
for (let i = 0; i < tagJson?.length; i++) {
|
||||
|
||||
}
|
||||
})()
|
||||
}
|
||||
}, [tagJson])
|
||||
|
||||
|
||||
|
|
@ -559,40 +498,6 @@ const SignDocument = () => {
|
|||
<div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
||||
<p className='tracking-wide font-semibold text-[1rem] text-[var(--primary)]'>Sign Made Easy</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* FIT - START */}
|
||||
<div
|
||||
tabIndex={1}
|
||||
onBlur={() => setIsFitDd(false)}
|
||||
>
|
||||
<div
|
||||
onClick={() => setIsFitDd(!isFitDd)}
|
||||
className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
|
||||
<p className='tracking-wide'>Fit</p>
|
||||
<MdKeyboardArrowDown style={{ transform: `${isFitDd ? "rotate(180deg)" : ""}` }} />
|
||||
</div>
|
||||
|
||||
{isFitDd && <div className='absolute bg-white rounded-sm z-50'>
|
||||
{fitObj.map((val, indx) => {
|
||||
return (<div
|
||||
key={indx}
|
||||
onClick={() => setSelFitIndx(indx)}
|
||||
className='flex z-50 items-center justify-between gap-2 w-[70px] p-2 text-xs cursor-default hover:bg-slate-100'>
|
||||
<div
|
||||
|
||||
className='flex items-center justify-between w-full'>
|
||||
<p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{val.label}</p>
|
||||
{selFitIndx === indx && <FaCheck className='text-sm text-slate-400' />}
|
||||
</div>
|
||||
</div>)
|
||||
})
|
||||
}
|
||||
</div>}
|
||||
</div>
|
||||
{/* FIT - END */}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -708,7 +613,7 @@ const SignDocument = () => {
|
|||
{/* Main container */}
|
||||
<div
|
||||
id="doc-con"
|
||||
className="zoom-con relative col-span-10 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
|
||||
className="relative col-span-10 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
|
||||
>
|
||||
|
||||
{
|
||||
|
|
@ -763,7 +668,7 @@ const SignDocument = () => {
|
|||
<div
|
||||
id={item.id}
|
||||
tabIndex={1}
|
||||
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
|
||||
className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-none" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
|
||||
// style={{ height: item.dimensions.height + "px" }}
|
||||
>
|
||||
|
||||
|
|
@ -1062,7 +967,7 @@ const SignDocument = () => {
|
|||
}
|
||||
|
||||
{/* tag pagination Start */}
|
||||
{/* {!transparentTags && !hideTags && <div className="sticky rounded-md bottom-2 left-[50%] translate-[-50%] max-w-max flex bg-slate-900 text-white text-sm opacity-70">
|
||||
{!transparentTags && !hideTags && <div className="sticky rounded-md bottom-2 left-[50%] translate-[-50%] max-w-max flex bg-slate-900 text-white text-sm opacity-70">
|
||||
<div className="px-3 py-1 cursor-pointer hover:bg-black rounded-l-md transition-all duration-150 "
|
||||
onClick={() => handleTagNavClick("P")}
|
||||
>Prev</div>
|
||||
|
|
@ -1070,7 +975,7 @@ const SignDocument = () => {
|
|||
<div className="px-3 py-1 cursor-pointer hover:bg-black rounded-r-md transition-all duration-150 "
|
||||
onClick={() => handleTagNavClick("N")}
|
||||
>Next</div>
|
||||
</div>} */}
|
||||
</div>}
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ import confetti from 'canvas-confetti'
|
|||
import { useWindowSize } from 'react-use'
|
||||
import { FaCheckCircle } from 'react-icons/fa'
|
||||
import { IoClose } from 'react-icons/io5'
|
||||
import CommonNav from '../CommonNav'
|
||||
|
||||
function Dashboard() {
|
||||
const [showSideBar, setShowSideBar] = React.useState(true)
|
||||
|
|
@ -103,32 +102,32 @@ function Dashboard() {
|
|||
}, [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
|
||||
}
|
||||
}, [showConfetti]);
|
||||
|
||||
|
||||
|
||||
|
|
@ -174,7 +173,6 @@ function Dashboard() {
|
|||
<div className={`overflow-y-auto absolute ${showSideBar ? 'w-[calc(100%-250px)]' : 'w-[calc(100%-60px)]'} h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)] transition-all duration-300`}>
|
||||
{/* Main Content */}
|
||||
<div className='px-2 py-1.5'>
|
||||
<CommonNav />
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { IoSettingsOutline } from "react-icons/io5";
|
|||
|
||||
import axios from 'axios';
|
||||
import { MdManageAccounts } from 'react-icons/md';
|
||||
import { GrTransaction } from 'react-icons/gr';
|
||||
|
||||
type SideBarProps = {
|
||||
showSideBar: boolean;
|
||||
|
|
@ -25,8 +24,7 @@ const menuPathMap: MenuPathMap = {
|
|||
'/': 'Home',
|
||||
'/templates': 'Templates',
|
||||
'/s/contact': 'Contact',
|
||||
// '/accounts': 'Accounts',
|
||||
'transactions' : "Account"
|
||||
'/accounts': 'Accounts',
|
||||
};
|
||||
|
||||
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
||||
|
|
@ -42,7 +40,6 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
headers: { "ngrok-skip-browser-warning": "69420" }
|
||||
}
|
||||
);
|
||||
sessionStorage.clear();
|
||||
// Redirect to login or refresh the page after logout
|
||||
window.location.href = '/login';
|
||||
} catch (err) {
|
||||
|
|
@ -64,8 +61,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
<SendForSign showSideBar={showSideBar} />
|
||||
<NavLink to="/" icon={<FaHome />} label="Home" showSideBar={showSideBar} menuPathMap={menuPathMap} />
|
||||
<NavLink to="/templates" icon={<HiTemplate />} label="Templates" showSideBar={showSideBar} menuPathMap={menuPathMap} />
|
||||
{/* <NavLink to="/accounts" icon={<MdManageAccounts />} label="Accounts" showSideBar={showSideBar} menuPathMap={menuPathMap} /> */}
|
||||
<NavLink to="transactions" icon={<GrTransaction />} label="Transactions" showSideBar={showSideBar} menuPathMap={menuPathMap} />
|
||||
<NavLink to="/accounts" icon={<MdManageAccounts />} label="Accounts" showSideBar={showSideBar} menuPathMap={menuPathMap} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,328 +1,97 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaClock,
|
||||
FaHourglassHalf,
|
||||
FaTasks,
|
||||
FaChevronDown,
|
||||
FaPlus,
|
||||
FaUserPlus,
|
||||
FaFilter,
|
||||
FaCalendarAlt
|
||||
} from 'react-icons/fa';
|
||||
import React, { useState } from 'react';
|
||||
import { FaCheckCircle, FaClock, FaHourglassHalf, FaTasks } from 'react-icons/fa';
|
||||
|
||||
// Define a type for card data
|
||||
interface CardData {
|
||||
title: string;
|
||||
count: number;
|
||||
icon: JSX.Element;
|
||||
gradient: string;
|
||||
shadowColor: string;
|
||||
iconBg: string;
|
||||
textColor: string;
|
||||
percentage?: number;
|
||||
trend?: 'up' | 'down' | 'stable';
|
||||
}
|
||||
|
||||
// interface CardData {
|
||||
// title: string;
|
||||
// count: number;
|
||||
// icon: React.ReactNode;
|
||||
// gradient: string;
|
||||
// shadowColor: string;
|
||||
// iconBg: string;
|
||||
// textColor: string;
|
||||
// trend: 'up' | 'down';
|
||||
// }
|
||||
|
||||
interface CardsProps {
|
||||
type?: 'dashboard' | 'account' | 'transactions';
|
||||
onOpenModal?: () => void;
|
||||
dashboardData: any;
|
||||
fromDate: string;
|
||||
toDate: string;
|
||||
onDateRangeChange: (range: { from: string; to: string }) => void;
|
||||
cards: CardData[];
|
||||
isLoading: boolean
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const AccountData: CardData[] = [
|
||||
const cards = [
|
||||
{
|
||||
title: 'Active Accounts',
|
||||
title: 'Action Required',
|
||||
count: 12,
|
||||
icon: <FaTasks size={18} className="text-blue-600" />,
|
||||
gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
|
||||
shadowColor: 'shadow-blue-200/50',
|
||||
iconBg: 'bg-blue-100 border-blue-200',
|
||||
textColor: 'text-blue-700',
|
||||
trend: 'up'
|
||||
icon: <FaTasks size={20} className="text-orange-500" />,
|
||||
ring: 'ring-orange-400/20',
|
||||
bg: 'bg-orange-50',
|
||||
},
|
||||
{
|
||||
title: 'In-Progress',
|
||||
title: 'Waiting for Others',
|
||||
count: 8,
|
||||
icon: <FaClock size={18} className="text-purple-600" />,
|
||||
gradient: 'bg-gradient-to-br from-purple-50 to-purple-100',
|
||||
shadowColor: 'shadow-purple-200/50',
|
||||
iconBg: 'bg-purple-100 border-purple-200',
|
||||
textColor: 'text-purple-700',
|
||||
trend: 'stable'
|
||||
icon: <FaClock size={20} className="text-yellow-500" />,
|
||||
ring: 'ring-yellow-400/20',
|
||||
bg: 'bg-yellow-50',
|
||||
},
|
||||
{
|
||||
title: 'Expiring Soon',
|
||||
count: 5,
|
||||
icon: <FaHourglassHalf size={20} className="text-red-500" />,
|
||||
ring: 'ring-red-400/20',
|
||||
bg: 'bg-red-50',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Completed',
|
||||
count: 27,
|
||||
icon: <FaCheckCircle size={18} className="text-green-600" />,
|
||||
gradient: 'bg-gradient-to-br from-green-50 to-green-100',
|
||||
shadowColor: 'shadow-green-200/50',
|
||||
iconBg: 'bg-green-100 border-green-200',
|
||||
textColor: 'text-green-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Inactive',
|
||||
count: 5,
|
||||
icon: <FaHourglassHalf size={18} className="text-gray-600" />,
|
||||
gradient: 'bg-gradient-to-br from-gray-50 to-gray-100',
|
||||
shadowColor: 'shadow-gray-200/50',
|
||||
iconBg: 'bg-gray-100 border-gray-200',
|
||||
textColor: 'text-gray-700',
|
||||
trend: 'down'
|
||||
icon: <FaCheckCircle size={20} className="text-green-500" />,
|
||||
ring: 'ring-green-400/20',
|
||||
bg: 'bg-green-50',
|
||||
},
|
||||
];
|
||||
|
||||
const filters = ['Last 7 Days', 'Last 30 Days', 'Last 6 Months', 'This Year'];
|
||||
const accounts = ['All Accounts', 'Account 1', 'Account 2', 'Account 3'];
|
||||
|
||||
const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRangeChange, cards, isLoading }) => {
|
||||
const [selectedFilter, setSelectedFilter] = useState<string>('Last 7 Days');
|
||||
const [selectedAccount, setSelectedAccount] = useState<string>('All Accounts');
|
||||
const [showCards, setShowCards] = useState<CardData[]>([]);
|
||||
// const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
|
||||
// useEffect(() => {
|
||||
// setIsLoading(true);
|
||||
// setTimeout(() => {
|
||||
// if (type === 'account') {
|
||||
// setShowCards(AccountData);
|
||||
// } else {
|
||||
// setShowCards(cards);
|
||||
// }
|
||||
// setIsLoading(false);
|
||||
// }, 500);
|
||||
// }, [type]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (type === 'dashboard') {
|
||||
const now = new Date();
|
||||
let fromDate = new Date();
|
||||
|
||||
switch (selectedFilter) {
|
||||
case 'Last 7 Days':
|
||||
fromDate.setDate(now.getDate() - 7);
|
||||
break;
|
||||
case 'Last 30 Days':
|
||||
fromDate.setDate(now.getDate() - 30);
|
||||
break;
|
||||
case 'Last 6 Months':
|
||||
fromDate.setMonth(now.getMonth() - 6);
|
||||
break;
|
||||
case 'This Year':
|
||||
fromDate = new Date(now.getFullYear(), 0, 1);
|
||||
break;
|
||||
default:
|
||||
fromDate.setDate(now.getDate() - 7);
|
||||
}
|
||||
|
||||
const from = fromDate.toISOString().split('T')[0];
|
||||
const to = now.toISOString().split('T')[0];
|
||||
|
||||
onDateRangeChange({ from, to });
|
||||
}
|
||||
}, [selectedFilter]);
|
||||
|
||||
const getButtonConfig = () => {
|
||||
switch (type) {
|
||||
case 'account':
|
||||
return {
|
||||
text: 'Add Account',
|
||||
icon: <FaPlus size={14} />,
|
||||
gradient: 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800'
|
||||
};
|
||||
case 'transactions':
|
||||
return {
|
||||
text: 'Send Invite',
|
||||
icon: <FaUserPlus size={14} />,
|
||||
gradient: 'bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800'
|
||||
};
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const buttonConfig = getButtonConfig();
|
||||
|
||||
const renderTrendIndicator = (trend: string | undefined, percentage: number | undefined) => {
|
||||
if (!trend || !percentage) return null;
|
||||
|
||||
const trendColors = {
|
||||
up: 'text-emerald-500',
|
||||
down: 'text-red-500',
|
||||
stable: 'text-gray-500'
|
||||
};
|
||||
|
||||
const trendSymbols = {
|
||||
up: '↗',
|
||||
down: '↘',
|
||||
stable: '→'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`flex items-center text-xs ${trendColors[trend as keyof typeof trendColors]} mt-1`}>
|
||||
<span className="mr-1">{trendSymbols[trend as keyof typeof trendSymbols]}</span>
|
||||
{/* <span>{percentage}%</span> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// if (isLoading) {
|
||||
// return (
|
||||
// <div className="w-full [h-50vh] px-6 py-8">
|
||||
// <div className="animate-pulse">
|
||||
// <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
|
||||
// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
// {[...Array(7)].map((_, i) => (
|
||||
// <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
|
||||
// ))}
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
const Cards = () => {
|
||||
const [selectedFilter, setSelectedFilter] = useState('Last 7 Days');
|
||||
|
||||
return (
|
||||
<div className="w-full px-4 py-3 mt-2 rounded-md">
|
||||
<div className="w-full px-4 py-3">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{/* <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
|
||||
<FaFilter className="text-white text-lg" />
|
||||
</div> */}
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-gray-800">Overview</h2>
|
||||
{/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-5 gap-3">
|
||||
<h2 className="text-lg font-medium text-gray-700">Overview</h2>
|
||||
|
||||
<div className="flex gap-2 w-full md:w-auto">
|
||||
{/* Account Selector */}
|
||||
<select
|
||||
value={'All'}
|
||||
onChange={() => {}}
|
||||
className="text-sm text-gray-700 border border-gray-300 rounded-sm px-3 py-1.5 focus:outline-none bg-white shadow-sm"
|
||||
>
|
||||
<option>All</option>
|
||||
<option>Account 1</option>
|
||||
<option>Account 2</option>
|
||||
<option>Account 3</option>
|
||||
</select>
|
||||
|
||||
{/* Date Filter */}
|
||||
<select
|
||||
value={selectedFilter}
|
||||
onChange={(e) => setSelectedFilter(e.target.value)}
|
||||
className="text-sm text-gray-700 border border-gray-300 rounded-sm px-3 py-1.5 focus:outline-none bg-white shadow-sm"
|
||||
>
|
||||
{filters.map((f) => (
|
||||
<option key={f}>{f}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Cards */}
|
||||
{isLoading ? <div className="w-full [h-50vh] px-6 py-8">
|
||||
<div className="animate-pulse">
|
||||
<div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{[...Array(7)].map((_, i) => (
|
||||
<div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div> :
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className={`group relative overflow-hidden rounded-xl ${card.gradient} border border-white/40 p-4 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm`}
|
||||
style={{
|
||||
animationDelay: `${index * 100}ms`
|
||||
}}
|
||||
>
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute -top-6 -right-6 w-12 h-12 rounded-full bg-current"></div>
|
||||
<div className="absolute -bottom-6 -left-6 w-10 h-10 rounded-full bg-current"></div>
|
||||
<div className="cursor-pointer grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{cards.map((card) => (
|
||||
<div
|
||||
key={card.title}
|
||||
className={`rounded-md bg-white/60 backdrop-blur-md border border-gray-200 p-5 transition-transform shadow-md hover:scale-[1.02] hover:shadow-lg`}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`p-3 rounded-full ${card.bg} ${card.ring}`}>
|
||||
{card.icon}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}>
|
||||
{card.icon}
|
||||
</div>
|
||||
{renderTrendIndicator(card.trend, card.percentage)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-xs font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
|
||||
{card.title}
|
||||
</h3>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200`}>
|
||||
{card.count}
|
||||
</p>
|
||||
<span className="text-[10px] text-gray-500">items</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-gray-500">{card.title}</p>
|
||||
<p className="text-xl font-bold text-gray-800">{card.count}</p>
|
||||
</div>
|
||||
|
||||
{/* Hover Effect */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cards;
|
||||
|
||||
|
||||
|
||||
|
||||
{/* <div className="flex flex-wrap gap-3 w-full lg:w-auto">
|
||||
{type === 'dashboard' && <>
|
||||
Account Selector
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedAccount}
|
||||
onChange={(e) => setSelectedAccount(e.target.value)}
|
||||
className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
|
||||
>
|
||||
{accounts.map((account) => (
|
||||
<option key={account} value={account}>{account}</option>
|
||||
))}
|
||||
</select>
|
||||
<FaChevronDown className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
|
||||
</div>
|
||||
|
||||
Date Filter
|
||||
<div className="relative">
|
||||
<select
|
||||
value={selectedFilter}
|
||||
onChange={(e) => setSelectedFilter(e.target.value)}
|
||||
className="appearance-none text-sm text-gray-700 border border-gray-300 rounded-xl px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white shadow-sm hover:shadow-md transition-all cursor-pointer min-w-[140px]"
|
||||
>
|
||||
{filters.map((filter) => (
|
||||
<option key={filter} value={filter}>{filter}</option>
|
||||
))}
|
||||
</select>
|
||||
<FaCalendarAlt className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs pointer-events-none" />
|
||||
</div>
|
||||
</>}
|
||||
|
||||
Action Button
|
||||
{buttonConfig && (
|
||||
<button
|
||||
className={`flex items-center gap-1 px-3 py-3 text-sm font-semibold text-white rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 active:scale-95 cursor-pointer ${buttonConfig.gradient}`}
|
||||
onClick={onOpenModal}
|
||||
>
|
||||
{buttonConfig.icon}
|
||||
{buttonConfig.text}
|
||||
</button>
|
||||
)}
|
||||
</div> */}
|
||||
|
|
@ -1,175 +1,22 @@
|
|||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import AccountNav from '../accounts/AccountNav';
|
||||
import Cards from './Cards';
|
||||
import StartSection from './StartSection';
|
||||
import api from '../../config/api';
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaClock,
|
||||
FaHourglassHalf,
|
||||
FaTasks,
|
||||
FaChevronDown,
|
||||
FaPlus,
|
||||
FaUserPlus,
|
||||
FaFilter,
|
||||
FaCalendarAlt
|
||||
} from 'react-icons/fa';
|
||||
|
||||
interface CardData {
|
||||
title: string;
|
||||
count: number;
|
||||
icon: JSX.Element;
|
||||
gradient: string;
|
||||
shadowColor: string;
|
||||
iconBg: string;
|
||||
textColor: string;
|
||||
percentage?: number;
|
||||
trend?: 'up' | 'down' | 'stable';
|
||||
}
|
||||
import React from 'react'
|
||||
import HomeTopNav from './HomeTopNav'
|
||||
import UploadDoc from './UploadDoc'
|
||||
import FilterSort from './FilterSort'
|
||||
import ShowDocs from './ShowDocs'
|
||||
import Cards from './Cards'
|
||||
import StartSection from './StartSection'
|
||||
|
||||
const Home = () => {
|
||||
const mapApiDataToCards = (data: any): CardData[] => {
|
||||
return [
|
||||
{
|
||||
title: 'Action Needed',
|
||||
count: data.actionNeeded || 0,
|
||||
icon: <FaTasks size={18} className="text-indigo-600" />,
|
||||
gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
|
||||
shadowColor: 'shadow-indigo-200/50',
|
||||
iconBg: 'bg-indigo-100 border-indigo-200',
|
||||
textColor: 'text-indigo-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Expiring Soon',
|
||||
count: data.expiring || 0,
|
||||
icon: <FaHourglassHalf size={18} className="text-rose-600" />,
|
||||
gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
|
||||
shadowColor: 'shadow-rose-200/50',
|
||||
iconBg: 'bg-rose-100 border-rose-200',
|
||||
textColor: 'text-rose-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Completed',
|
||||
count: data.completed || 0,
|
||||
icon: <FaCheckCircle size={18} className="text-teal-600" />,
|
||||
gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
|
||||
shadowColor: 'shadow-teal-200/50',
|
||||
iconBg: 'bg-teal-100 border-teal-200',
|
||||
textColor: 'text-teal-700',
|
||||
trend: 'up'
|
||||
},
|
||||
{
|
||||
title: 'Draft',
|
||||
count: data.draft || 0,
|
||||
icon: <FaClock size={18} className="text-stone-600" />,
|
||||
gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
|
||||
shadowColor: 'shadow-blue-200/50',
|
||||
iconBg: 'bg-blue-100 border-blue-200',
|
||||
textColor: 'text-blue-700',
|
||||
trend: 'down'
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
const [dashboardData, setDashboardData] = useState<any>(null);
|
||||
const [fromDate, setFromDate] = useState<string>('');
|
||||
const [toDate, setToDate] = useState<string>('');
|
||||
const [cards, setCards] = useState<CardData[]>([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
|
||||
console.log("activeAccountId", activeAccountId);
|
||||
console.log("cards", cards);
|
||||
|
||||
const getDashboardData = async () => {
|
||||
if (!activeAccountId) return;
|
||||
|
||||
setIsLoading(true);
|
||||
const payload = {
|
||||
account: activeAccountId
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await api.get('/api/dashboard', { params: payload });
|
||||
setDashboardData(res.data);
|
||||
console.log("Dashboard Data:", res.data);
|
||||
const cardDataArray = mapApiDataToCards(res.data);
|
||||
setCards(cardDataArray);
|
||||
} catch (error) {
|
||||
console.error("Error fetching dashboard data:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateRangeChange = useCallback(async (range: { from: string; to: string }) => {
|
||||
const isoFrom = new Date(range.from).toISOString();
|
||||
const isoTo = new Date(range.to).toISOString();
|
||||
setFromDate(isoFrom);
|
||||
setToDate(isoTo);
|
||||
}, []);
|
||||
|
||||
// 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);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Re-fetch dashboard data when activeAccountId changes
|
||||
useEffect(() => {
|
||||
if (activeAccountId) {
|
||||
getDashboardData();
|
||||
}
|
||||
}, [activeAccountId]);
|
||||
|
||||
// Set default date range on mount (last 7 days)
|
||||
useEffect(() => {
|
||||
const now = new Date();
|
||||
const from = new Date();
|
||||
from.setDate(now.getDate() - 7);
|
||||
|
||||
setFromDate(from.toISOString());
|
||||
setToDate(now.toISOString());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cards
|
||||
onDateRangeChange={handleDateRangeChange}
|
||||
dashboardData={dashboardData}
|
||||
fromDate={fromDate}
|
||||
toDate={toDate}
|
||||
cards={cards}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<HomeTopNav />
|
||||
<Cards />
|
||||
<StartSection />
|
||||
{/* <UploadDoc /> */}
|
||||
{/* <FilterSort /> */}
|
||||
{/* <ShowDocs /> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default Home;
|
||||
export default Home
|
||||
|
|
@ -33,7 +33,7 @@ const HomeTopNav = () => {
|
|||
</button>
|
||||
|
||||
<Link
|
||||
to="settings"
|
||||
to="/settings"
|
||||
aria-label="Settings"
|
||||
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ const StartSection = () => {
|
|||
|
||||
return (
|
||||
<section className="px-4 py-3 w-full">
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
|
||||
<h2 className="text-lg font-semibold text-gray-800 mb-6">Get Started</h2>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{cards.map((card, index) => (
|
||||
|
|
|
|||
|
|
@ -1,356 +0,0 @@
|
|||
import React, { useEffect } from "react";
|
||||
import {
|
||||
FaCheck,
|
||||
FaFileAlt,
|
||||
FaUsers,
|
||||
FaEnvelope,
|
||||
FaClock,
|
||||
FaDownload,
|
||||
FaShare,
|
||||
FaShieldAlt,
|
||||
FaLock,
|
||||
FaPen,
|
||||
FaCheckCircle
|
||||
} from 'react-icons/fa';
|
||||
import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { fetchDocuments } from "../../../store/slices/documentSlice";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import Loader from "../../dashboard/Loader";
|
||||
import confetti from 'canvas-confetti'
|
||||
import { IoClose } from "react-icons/io5";
|
||||
import { IoMdHome } from "react-icons/io";
|
||||
|
||||
type Signer = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
routingOrder: number;
|
||||
completed: boolean;
|
||||
};
|
||||
|
||||
// Signers List Component
|
||||
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-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
||||
<FaUsers className="text-blue-600" />
|
||||
Signature Status
|
||||
</h3>
|
||||
<span className="text-sm text-gray-600">
|
||||
{signers.filter(s => s.completed).length} of {signers.length} signed
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar">
|
||||
{signers.map((signer) => (
|
||||
<div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 rounded-lg">
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
|
||||
{signer.name.split(" ").map(n => n[0].toUpperCase()).join("")}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-800">{signer.name}</div>
|
||||
<div className="text-sm text-gray-600">{signer.email}</div>
|
||||
<div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{signer.completed ? (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
|
||||
<FaCheck className="w-3 h-3" />
|
||||
Signed
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">
|
||||
<FaClock className="w-3 h-3" />
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Fixed Signing Order Diagram Component
|
||||
const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
||||
const groupByRoutingOrder = (data: Signer[]) => {
|
||||
const grouped: Record<number, Signer[]> = {};
|
||||
data.forEach((signer) => {
|
||||
if (!grouped[signer.routingOrder]) {
|
||||
grouped[signer.routingOrder] = [];
|
||||
}
|
||||
grouped[signer.routingOrder].push(signer);
|
||||
});
|
||||
return grouped;
|
||||
};
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
return name
|
||||
.split(" ")
|
||||
.map((n) => n[0].toUpperCase())
|
||||
.join("");
|
||||
};
|
||||
|
||||
const grouped = groupByRoutingOrder(signers);
|
||||
const sortedOrders = Object.keys(grouped)
|
||||
.map(Number)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
const currentProcessingOrder =
|
||||
sortedOrders.find((order) =>
|
||||
grouped[order].some((signer) => !signer.completed)
|
||||
) || -1;
|
||||
|
||||
return (
|
||||
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
|
||||
<div className="overflow-x-auto overflow-y-auto h-[69vh] no-scrollbar flex justify-center items-center">
|
||||
<div className="flex justify-center items-center gap-4 min-w-max">
|
||||
{/* Mail icon */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="bg-blue-100 p-4 rounded-full">
|
||||
<FaEnvelope className="text-blue-600 text-2xl" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-2">Sent</p>
|
||||
</div>
|
||||
|
||||
{/* Dotted line */}
|
||||
<div className="flex items-center">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
|
||||
{/* Signers by routing order */}
|
||||
<div className="flex items-center justify-center space-x-6">
|
||||
{sortedOrders.map((order, index) => (
|
||||
<React.Fragment key={order}>
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="text-sm font-medium text-gray-600 mb-2">
|
||||
Step {order}
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{grouped[order].map((signer) => {
|
||||
let bgColor = "";
|
||||
let icon = null;
|
||||
|
||||
if (signer.completed) {
|
||||
bgColor = "bg-[var(--primary)]";
|
||||
icon = <FaCheck className="text-green-600" />;
|
||||
} else if (order === currentProcessingOrder) {
|
||||
bgColor = "bg-yellow-500";
|
||||
icon = <FaClock className="text-yellow-800" />;
|
||||
} else {
|
||||
bgColor = "bg-gray-400";
|
||||
icon = <FaLock className="text-gray-500" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={signer.id} className="relative">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
|
||||
title={signer.name}
|
||||
>
|
||||
{getInitials(signer.name)}
|
||||
<span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
|
||||
{icon}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
|
||||
{signer.name.split(" ")[0]}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{index < sortedOrders.length - 1 && (
|
||||
<div className="flex items-center">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Main DocumentCompletionScreen Component
|
||||
const DocumentCompletionScreen = () => {
|
||||
const documentList = [
|
||||
{ title: 'Document 1', pages: 12 },
|
||||
{ title: 'Document 2', pages: 8 },
|
||||
{ title: 'Document 3', pages: 5 },
|
||||
{ title: 'Document 4', pages: 22 },
|
||||
{ title: 'Document 5', pages: 10 },
|
||||
{ title: 'Document 6', pages: 15 },
|
||||
{ title: 'Document 7', pages: 7 },
|
||||
{ title: 'Document 8', pages: 9 },
|
||||
{ title: 'Document 9', pages: 6 },
|
||||
{ title: 'Document 10', pages: 11 },
|
||||
{ title: 'Document 11', pages: 4 }, // Won't be shown due to slice
|
||||
];
|
||||
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
const [showConfetti, setShowConfetti] = React.useState(true)
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
return null;
|
||||
}
|
||||
|
||||
// const transactionId = useSelector((state: RootState) => state.transaction.transactionId)
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
|
||||
selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (showConfetti) {
|
||||
const duration = 3000;
|
||||
const end = Date.now() + duration;
|
||||
|
||||
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]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<>
|
||||
{
|
||||
showConfetti && (
|
||||
<div className="absolute top-0 left-0 w-full h-full z-[9999] bg-white/80 backdrop-blur-sm flex items-center justify-center">
|
||||
{/* <Confetti width={width} height={height} /> */}
|
||||
|
||||
<div className="relative bg-white bg-opacity-90 backdrop-blur-lg border border-green-200 shadow-xl rounded-md px-8 py-6 w-[90%] max-w-sm text-center animate-fade-in-up">
|
||||
{/* Close Icon */}
|
||||
<button
|
||||
onClick={() => setShowConfetti(false)} // or whatever logic hides the modal
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
|
||||
aria-label="Close"
|
||||
>
|
||||
<IoClose className="text-2xl" />
|
||||
</button>
|
||||
|
||||
{/* Success Icon */}
|
||||
<FaCheckCircle className="text-green-500 text-5xl mb-4 mx-auto drop-shadow-lg" />
|
||||
|
||||
{/* Message */}
|
||||
<h2 className="text-2xl font-semibold text-gray-800 mb-1">Transaction Successful</h2>
|
||||
<p className="text-gray-600 text-sm">Your transaction has been created and saved successfully.</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</>
|
||||
<div className="min-h-screen bg-[var(--mainViewBg)]">
|
||||
{/* Top Banner */}
|
||||
|
||||
<div className="w-full px-6 py-2 bg-white border-b rounded-sm border-gray-200">
|
||||
<div className="max-w-[97vw] mx-auto px-2 py-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link to='/' className="w-5 h-5 text-green-700 rounded-full flex items-center justify-center">
|
||||
<IoMdHome className="h-10 w-10" />
|
||||
</Link>
|
||||
{/* <div className="w-5 h-5 bg-white text-green-800 rounded-full flex items-center justify-center">
|
||||
<FaCheck className="text-sm" />
|
||||
</div> */}
|
||||
<div>
|
||||
<h2 className="text-md font-semibold text-gray-900">Awesome! Your document is sent for signature</h2>
|
||||
</div>
|
||||
</div>
|
||||
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
|
||||
<FaPen className=" text-white text-md" />
|
||||
<span className="tracking-wide text-white">Edit</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{(selectedRecipients.length > 0 && selectedDocuments.length > 0) ?
|
||||
<div className="p-3">
|
||||
<div className="max-w-[97vw] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
|
||||
{/* Left Section - Document Details */}
|
||||
<div className="lg:col-span-6 space-y-2">
|
||||
{/* Document Preview Card */}
|
||||
<div className="bg-white/60 rounded-md shadow-sm border border-gray-100 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto">
|
||||
<div className="p-3 ">
|
||||
{selectedDocuments?.map((item, index) => (
|
||||
<div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
{/* <FaFileAlt className="text-blue-600 text-xl" /> */}
|
||||
<img src={item.images[0].src} alt="document" className="h-10 w-10" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-md font-semibold text-gray-800">
|
||||
Name : {item.name ?? '--'}
|
||||
</h3>
|
||||
<div className="text-gray-600 text-sm">
|
||||
Status : {item.status ?? '--'}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div><SignersList signers={selectedRecipients} /></div>
|
||||
</div>
|
||||
|
||||
{/* Right Section - Signer Components */}
|
||||
<div className="lg:col-span-6 space-y-1.5">
|
||||
{/* Signing Order Diagram */}
|
||||
<SigningOrderDiagram signers={selectedRecipients} />
|
||||
|
||||
{/* Signers List */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
: <Loader />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DocumentCompletionScreen;
|
||||
|
|
@ -9,7 +9,7 @@ import { RootState } from "../../../store/store";
|
|||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { setImages } from "../../../store/slices/selectedDocsSlice";
|
||||
import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
|
||||
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
|
||||
import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
|
||||
import Loader from "../../dashboard/Loader";
|
||||
|
|
@ -22,24 +22,15 @@ const ProcessStepOne = () => {
|
|||
message: string;
|
||||
}
|
||||
|
||||
let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!transactionId) {
|
||||
transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||
transactionId = templateId;
|
||||
dispatch(toggleToTemplates());
|
||||
}
|
||||
console.log("ProcessStepOne called with accountId:", accountId, "and transactionId:", transactionId);
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
return null;
|
||||
}
|
||||
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
// const { selectedDocuments, signType } = useSelector((state: RootState) => state.selectedDocuments)
|
||||
|
||||
|
|
@ -54,7 +45,7 @@ const ProcessStepOne = () => {
|
|||
|
||||
// const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)
|
||||
// const user = useSelector((state: RootState) => state.user)
|
||||
|
||||
|
||||
const [emailDtls, setEmailDtls] = useState<EmailDtls>({ subject: "Documents for Signature", message: "" });
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -62,30 +53,10 @@ const ProcessStepOne = () => {
|
|||
}, [])
|
||||
|
||||
const handleNextClick = async (isSendNow: boolean) => {
|
||||
let formError = {
|
||||
documents: false,
|
||||
recipients: false,
|
||||
subject: false
|
||||
}
|
||||
|
||||
if (!selectedDocuments.length) {
|
||||
formError.documents = true
|
||||
}
|
||||
if (!selectedRecipients.length) {
|
||||
formError.recipients = true
|
||||
}
|
||||
if (!emailDtls.subject.length) {
|
||||
formError.subject = true
|
||||
}
|
||||
|
||||
if (formError.documents || formError.recipients || formError.subject) {
|
||||
if (!selectedDocuments.length || !selectedRecipients.length) {
|
||||
console.log(selectedDocuments, 'line 193')
|
||||
toast.dismiss();
|
||||
toast.error(`${formError.documents ? "Add Document" : ""}
|
||||
${(formError.documents && formError.recipients) ? " | " : ""}
|
||||
${formError.recipients ? "Add Recipient" : ""}
|
||||
${(formError.documents || formError.recipients) ? " | " : ""}
|
||||
${formError.subject ? "Add Subject" : ""}`, {
|
||||
toast.error("Add Documents | Recipients First", {
|
||||
position: "top-center",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
|
|
@ -108,9 +79,9 @@ const ProcessStepOne = () => {
|
|||
order: index,
|
||||
}));
|
||||
|
||||
await api.patch(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/documents`, { "documents": documentsData });
|
||||
await api.patch(`/api/accounts/${accountId}/transactions/${transactionId}/documents`, { "documents": documentsData });
|
||||
|
||||
await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/documents?include_images=true`).then(res => {
|
||||
await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`).then(res => {
|
||||
if (res.status === 200) {
|
||||
dispatch(setDocuments(res.data));
|
||||
}
|
||||
|
|
@ -121,7 +92,7 @@ const ProcessStepOne = () => {
|
|||
dispatch(showLoader("Processing Recipients..."));
|
||||
|
||||
const recipientsData = selectedRecipients.map((recipient, index) => ({
|
||||
id: "id" in recipient ? recipient.id : null,
|
||||
// index,
|
||||
routingOrder: "routingOrder" in recipient && recipient.routingOrder ? recipient.routingOrder : 1,
|
||||
type: recipient.type,
|
||||
firstName: recipient.firstName,
|
||||
|
|
@ -141,18 +112,12 @@ const ProcessStepOne = () => {
|
|||
name: `${recipient.firstName} ${recipient.lastName}`
|
||||
}));
|
||||
|
||||
dispatch(addRecipientAsync({ recipientsData, accountId, transactionId }));
|
||||
dispatch(showLoader("Processing Message..."));
|
||||
|
||||
await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { subject: emailDtls.subject, message: emailDtls.message, status: "CREATED" }).then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
|
||||
dispatch(addRecipientAsync({recipientsData, accountId, transactionId}));
|
||||
|
||||
if (isSendNow) {
|
||||
dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
|
||||
setTimeout(() => {
|
||||
// navigate("/");
|
||||
navigate("/");
|
||||
}, 1000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
|
|
@ -245,8 +210,7 @@ const ProcessStepOne = () => {
|
|||
<label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={emailDtls.subject}
|
||||
value={emailDtls.subject || "Documents for Signature"}
|
||||
onChange={(e) => setEmailDtls({ ...emailDtls, subject: e.target.value })}
|
||||
placeholder="Email Subject"
|
||||
className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const RecipientAddCard = () => {
|
|||
const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (recipient.lastName === "" || recipient.email === "" || !recipient.type) return;
|
||||
if (recipient.firstName === "" || recipient.lastName === "" || recipient.email === "" || !recipient.type) return;
|
||||
|
||||
// Validate Email Format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
|
@ -106,7 +106,7 @@ const RecipientAddCard = () => {
|
|||
{/* Name Inputs */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<input
|
||||
// required
|
||||
required
|
||||
type="text"
|
||||
onFocus={() => setOpenContactModal(true)}
|
||||
onBlur={handleContactModalBlur}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { useDispatch, useSelector } from "react-redux";
|
||||
import {
|
||||
removeRecipientAsync,
|
||||
removeSelectedRecipient,
|
||||
// setSigningOrder,
|
||||
updateRecipientOrder, // 👈 You need to define this in your slice
|
||||
|
|
@ -12,7 +11,6 @@ import { FaUsersLine } from "react-icons/fa6";
|
|||
import { useState } from "react";
|
||||
import SigningOrderDiagram from "../../../SigningOrderDiagram ";
|
||||
import { IoCloseOutline } from "react-icons/io5";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
if (!name) return "";
|
||||
|
|
@ -24,15 +22,7 @@ const getInitials = (name: string) => {
|
|||
};
|
||||
|
||||
const RecipientCards = () => {
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!transactionId) {
|
||||
transactionId = templateId;
|
||||
}
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
// const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder);
|
||||
const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
|
||||
|
|
@ -44,14 +34,7 @@ const RecipientCards = () => {
|
|||
};
|
||||
|
||||
const handleRemoveRecipient = (recipient) => {
|
||||
if (!accountId || !transactionId) return;
|
||||
// dispatch(removeSelectedRecipient(recipient))
|
||||
dispatch(removeRecipientAsync({
|
||||
recipientId: recipient.id,
|
||||
email: recipient.email,
|
||||
accountId: accountId,
|
||||
transactionId: transactionId,
|
||||
}))
|
||||
dispatch(removeSelectedRecipient(recipient))
|
||||
if (recipients.length === 2) {
|
||||
let leftRecipient = recipients.filter((obj) => {
|
||||
if ("id" in obj && "id" in recipient) {
|
||||
|
|
@ -169,8 +152,8 @@ const RecipientCards = () => {
|
|||
<div className="pb-2 text-white flex justify-between items-center">
|
||||
<p className="font-semibold">Signing Order</p>
|
||||
<div
|
||||
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
|
||||
className="text-xl cursor-pointer hover:text-gray-200 transition-all">
|
||||
onClick={() => setSigningOrderModal({...signingOrderModal, open: false})}
|
||||
className="text-xl cursor-pointer hover:text-gray-200 transition-all">
|
||||
<IoCloseOutline />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,19 +11,15 @@ import { Bounce, toast } from "react-toastify";
|
|||
import api from '../../../config/api';
|
||||
import DocumentCard from './DocumentCard';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
|
||||
|
||||
const SelectedDocuments = () => {
|
||||
// let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
|
||||
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const documents = useSelector((state: RootState) => state.documents.documents);
|
||||
const templateId = useParams<{ templateId: string }>().templateId;
|
||||
let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
if (!transactionId) {
|
||||
transactionId = templateId;
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
return null;
|
||||
}
|
||||
|
||||
const [isModalOpen, setModalOpen] = useState(false);
|
||||
|
|
|
|||
|
|
@ -4,20 +4,18 @@ import { RootState } from '../../../store/store'
|
|||
|
||||
import api from '../../../config/api';
|
||||
|
||||
import RightSideBar from './rightSideBar/RightSideBar';
|
||||
import RightSideBar from './RightSideBar';
|
||||
import { DroppedItem } from '../../../utlity/types';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../../store/slices/transactionSlice';
|
||||
import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
|
||||
import fields from '../../../helper/fieldsListData';
|
||||
import { fetchRecipients } from '../../../store/slices/selectedRecipientsSlice';
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
|
||||
import { IoAdd } from 'react-icons/io5';
|
||||
import Loader from '../../dashboard/Loader';
|
||||
|
||||
export interface DroppedItemsObj {
|
||||
[key: string]: DroppedItem[]
|
||||
}
|
||||
|
|
@ -188,6 +186,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// const remove = []
|
||||
|
||||
// console.log(updatedTags, "updatedTags");
|
||||
|
||||
for (const dropPageIds of Object.keys(updatedTags)) {
|
||||
for (const dropTag of updatedTags[dropPageIds]) {
|
||||
let mask = null
|
||||
|
|
@ -203,8 +202,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
}
|
||||
// }
|
||||
|
||||
console.log(dropTag, "line 204")
|
||||
|
||||
const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
|
||||
|
||||
const updatedTagData = {
|
||||
|
|
@ -213,26 +210,26 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
"dimensions": dropTag.dimensions,
|
||||
"type": dropTag.type.toUpperCase(),
|
||||
// "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
|
||||
"minLength": "minLength" in dropTag ? dropTag.minLength : 0,
|
||||
"maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
|
||||
"error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
|
||||
"regex": "regex" in dropTag ? dropTag.regex : []
|
||||
// }
|
||||
,
|
||||
validation: {
|
||||
"minLength": 0,
|
||||
"maxLength": 0,
|
||||
"error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
|
||||
"regex": "regex" in dropTag ? dropTag.regex : []
|
||||
},
|
||||
"documentId": dropTag.documentId,
|
||||
"options": ("options" in dropTag) ? dropTag.options : [],
|
||||
"pageIndex": dropTag.pageIndex,
|
||||
"recipientId": dropTag.recipientId,
|
||||
"styles": "styles" in dropTag ? dropTag.styles : {
|
||||
"font": "",
|
||||
"font": "Great Vibes",
|
||||
"italic": false,
|
||||
"bold": false,
|
||||
"underline": false,
|
||||
"color": "black",
|
||||
"textSize": 0
|
||||
"textSize": 14.0
|
||||
},
|
||||
// "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
|
||||
"required": "required" in dropTag ? dropTag.required : true,
|
||||
"required": false,
|
||||
"update": "update" in dropTag ? dropTag.update : false,
|
||||
"readOnly": false,
|
||||
}
|
||||
|
|
@ -275,13 +272,9 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// for(const recipient of selectedRecipients) {
|
||||
// const recrecipient
|
||||
// }
|
||||
|
||||
tagsData = groupByRecipientId(tagsData);
|
||||
sendTagsToRecipients(tagsData, accountId, transactionId);
|
||||
|
||||
(async () => {
|
||||
const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, {status: "SENT"})
|
||||
console.log(res, "Check123")
|
||||
})()
|
||||
}, [isSend])
|
||||
// Save Tags - END
|
||||
|
||||
|
|
@ -291,7 +284,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
// HANDLE DROP - START
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
|
||||
console.log("// HANDLE DROP - START")
|
||||
event.preventDefault();
|
||||
|
||||
const data = window.dragElemData;
|
||||
|
|
@ -313,7 +305,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
|
||||
|
||||
let prepData = {
|
||||
properties: data.properties,
|
||||
icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
|
||||
type: dragElemData.label,
|
||||
subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
|
||||
|
|
@ -443,7 +434,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
// HANDLE EXPAND TAG - START
|
||||
const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
|
||||
console.log("HANDLE EXPAND TAG - START")
|
||||
event.preventDefault(); // Prevent text selection issues
|
||||
|
||||
const expandingElemIcon = event.currentTarget;
|
||||
|
|
@ -524,10 +514,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
})()
|
||||
}
|
||||
|
||||
const handleAddRadioClick = (key:string) => {
|
||||
console.log("Handle Radio Clicled", key)
|
||||
console.log(droppedItems, "line 525")
|
||||
}
|
||||
|
||||
// const handleAddRadio = (e: React.MouseEvent<HTMLElement>, key: string, index: number) => {
|
||||
// // const dataToSet: DroppedItemsObj = {
|
||||
|
|
@ -630,58 +616,13 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
// }
|
||||
|
||||
|
||||
// NEW DIRECTIONAL MOVEMENT HANDLER - START
|
||||
const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
|
||||
if (!selectedTag) return;
|
||||
|
||||
const { key, index } = selectedTag;
|
||||
const currentItem = droppedItems[key]?.[index];
|
||||
|
||||
if (!currentItem) return;
|
||||
|
||||
let newLeft = currentItem.dimensions.left;
|
||||
let newTop = currentItem.dimensions.top;
|
||||
|
||||
switch (direction) {
|
||||
case 'up':
|
||||
newTop = Math.max(0, newTop - stepSize);
|
||||
break;
|
||||
case 'down':
|
||||
newTop = newTop + stepSize;
|
||||
break;
|
||||
case 'left':
|
||||
newLeft = Math.max(0, newLeft - stepSize);
|
||||
break;
|
||||
case 'right':
|
||||
newLeft = newLeft + stepSize;
|
||||
break;
|
||||
}
|
||||
|
||||
setDroppedItems({
|
||||
...droppedItems,
|
||||
[key]: Array.isArray(droppedItems[key])
|
||||
? droppedItems[key].map((item, i) =>
|
||||
i === index
|
||||
? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
|
||||
: item
|
||||
)
|
||||
: [],
|
||||
});
|
||||
};
|
||||
|
||||
// Create a wrapper that matches DirectionalControls' expected signature
|
||||
const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
|
||||
handleDirectionalMove(direction, 5); // Use default stepSize of 5
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Center Doc Container - START */}
|
||||
<div id="doc-con" className='zoom-con col-span-8 bg-slate-100 h-full w-full overflow-auto scroll-smooth'>
|
||||
|
||||
{
|
||||
selectedDocuments.length > 0 ? selectedDocuments.map((doc, indxDoc) => {
|
||||
selectedDocuments.length > 0 && selectedDocuments.map((doc, indxDoc) => {
|
||||
return (
|
||||
<div key={indxDoc} className='flex flex-col'>
|
||||
<div className='py-2 text-sm'>
|
||||
|
|
@ -753,53 +694,21 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
{/* Expand Circle - ENDS */}
|
||||
|
||||
|
||||
{
|
||||
item.type !== "radio" ?
|
||||
<div
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// style={{ width: `${item.width}px !important` }}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
<div>
|
||||
{/* Radio - Container - START */}
|
||||
<div>
|
||||
|
||||
{/* Radio- Item - START */}
|
||||
<div
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// style={{ width: `${item.width}px !important` }}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
{/* Radio- Item - END */}
|
||||
<div
|
||||
onPointerDown={(e) => handleTagMouseDown(e, key, index)}
|
||||
// style={{ width: `${item.width}px !important` }}
|
||||
className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
|
||||
style={{ background: selectedRecipient[0]?.color }}
|
||||
>
|
||||
<p
|
||||
className={`flex justify-center items-center w-full text-xl text-white h-full`}
|
||||
// style={{ color: selectedRecipients[item.recipientIndx]?.color }}
|
||||
>
|
||||
{IconComponent}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Radio - Container - END */}
|
||||
|
||||
|
||||
<IoAdd onClick={() => handleAddRadioClick(key)} className='ml-[50%] translate-x-[-50%] cursor-pointer' />
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -837,18 +746,13 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
|
|||
|
||||
</div>
|
||||
)
|
||||
}) : <Loader />
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} DirectionalControlsProps={{
|
||||
onMove: directionalControlsHandler,
|
||||
disabled: false,
|
||||
stepSize: 5,
|
||||
className: ''
|
||||
}} />}
|
||||
{selectedTag && <RightSideBar selectedTag={droppedItems[selectedTag.key][selectedTag.index]} setDroppedItems={setDroppedItems} selTagKey={selectedTag.key} selTagIndx={selectedTag.index} />}
|
||||
{/* Center Doc Container - END */}
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@ import api from '../../../config/api';
|
|||
import { useParams } from 'react-router-dom';
|
||||
import typeToIconMap from '../../../helper/iconMap';
|
||||
import { FaQuestionCircle } from 'react-icons/fa';
|
||||
import { TagsProperties } from '../../../utlity/types';
|
||||
|
||||
const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string, recipientId: number, recipientIndx: number, tagsProperties: TagsProperties) => {
|
||||
const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string, recipientId: number, recipientIndx: number) => {
|
||||
|
||||
const dragElemRect = event.currentTarget.getBoundingClientRect();
|
||||
let width = dragElemRect.width
|
||||
let height = dragElemRect.height
|
||||
|
|
@ -27,8 +27,7 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
|
|||
recipientId: recipientId,
|
||||
recipientIndx: recipientIndx,
|
||||
width,
|
||||
height,
|
||||
properties: tagsProperties
|
||||
height
|
||||
}
|
||||
|
||||
window.dragElemData = JSON.stringify(obj);
|
||||
|
|
@ -42,7 +41,7 @@ interface FieldListProps {
|
|||
|
||||
const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx }) => {
|
||||
|
||||
const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
|
||||
const [tagsData, setTagsData] = useState([]);
|
||||
|
||||
const { accountId } = useParams<{ accountId: string }>();
|
||||
if (!accountId) {
|
||||
|
|
@ -92,7 +91,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
|
|||
<div
|
||||
draggable={true}
|
||||
key={index}
|
||||
onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx, field)}
|
||||
onPointerDown={(e) => handlePointerDown(e, field.type.toLowerCase(), recipientId, recipientIndx)}
|
||||
className="p-1 flex justify-start items-center gap-2 rounded-sm cursor-grab hover:bg-slate-200 transition-all duration-300">
|
||||
<div
|
||||
className={`p-1 text-sm rounded-sm text-white`}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { MdKeyboardArrowDown } from 'react-icons/md'
|
|||
import { RiResetLeftLine, RiResetRightLine } from 'react-icons/ri'
|
||||
import { fetchRecipients } from '../../../store/slices/selectedRecipientsSlice'
|
||||
import { fetchDocuments } from '../../../store/slices/documentSlice'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
interface NavTwoProps {
|
||||
isFields: boolean;
|
||||
|
|
@ -57,8 +57,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
|
|||
const [isFitDd, setIsFitDd] = useState<boolean>(false)
|
||||
const [selFitIndx, setSelFitIndx] = useState<number>(0);
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
|
||||
|
|
@ -78,7 +76,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
|
|||
setIsSend(false);
|
||||
}
|
||||
setIsSend(!isSend)
|
||||
navigate(`/document-completion-screen/${accountId}/${transactionId}`)
|
||||
}
|
||||
|
||||
const handleSetIsFields = (setTo: boolean) => {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
|
||||
import NavTwo from './NavTwo';
|
||||
import LeftSideBar from './LeftSideBar';
|
||||
import DocumentContainer from './DocumentContainer';
|
||||
|
||||
import { IoMdClose } from 'react-icons/io'
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { RootState } from '../../../store/store';
|
||||
import Loader from '../../dashboard/Loader';
|
||||
|
|
@ -24,6 +25,28 @@ const ProcessStepTwo = () => {
|
|||
|
||||
return (
|
||||
<div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
|
||||
|
||||
{/* Top Header One */}
|
||||
|
||||
{/* <div className='flex items-center shadow-sm pb-3 bg-slate-100'>
|
||||
|
||||
<div className='flex w-full justify-center items-center px-4'>
|
||||
<div className='cursor-default flex justify-center items-center gap-4 border-b-3 relative border-[var(--primary)] py-1 px-4'>
|
||||
<p className="text-xs tracking-wider">Setup your Document</p>
|
||||
<div className='absolute bottom-[-7px] w-3 h-3 rounded-full right-[-4px] bg-[var(--primary)] z-50' ></div>
|
||||
</div>
|
||||
<div className='cursor-default flex justify-center items-center gap-4 border-b-3 relative border-[var(--primary)] py-1 px-4'>
|
||||
<p className="text-xs tracking-wider">Prepare</p>
|
||||
<div className='absolute bottom-[-7px] w-3 h-3 rounded-full right-[-4px] bg-[var(--primary)] z-50' ></div>
|
||||
</div>
|
||||
<div className='cursor-default flex justify-center items-center gap-4 border-b-3 relative border-[var(--primaryLight)] py-1 px-4'>
|
||||
<p className="text-xs tracking-wider">Hooray !</p>
|
||||
<div className='absolute bottom-[-7px] w-3 h-3 rounded-full right-[-4px] bg-[var(--primaryLight)] z-50' ></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* Top Header One */}
|
||||
|
||||
<NavTwo isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
|
||||
|
||||
<div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,653 @@
|
|||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import { DroppedItemsObj } from "./DocumentContainer";
|
||||
import React, { ReactHTMLElement, useEffect, useState } from "react";
|
||||
|
||||
|
||||
import { RiAsterisk } from "react-icons/ri";
|
||||
import { GoDotFill } from "react-icons/go";
|
||||
import { IoClose } from "react-icons/io5";
|
||||
import { LuAsterisk } from "react-icons/lu";
|
||||
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../utlity/dateTimeUtils";
|
||||
import { DroppedItem } from "../../../utlity/types";
|
||||
import { IoMdClose } from "react-icons/io";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
interface DroppedItemProps {
|
||||
selectedTag: DroppedItem
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
|
||||
selTagKey: string,
|
||||
selTagIndx: number
|
||||
}
|
||||
|
||||
enum TEXT {
|
||||
PARAGRAPH = "paragraph",
|
||||
SINGLE_LINE = "single_line",
|
||||
PASSWORD = "password",
|
||||
}
|
||||
// enum SIGNATURE {
|
||||
// TYPED = "typed",
|
||||
// DRAW = "draw",
|
||||
// UPLOAD = "upload",
|
||||
// }
|
||||
// enum INITIALS {
|
||||
// TYPED = "typed",
|
||||
// DRAW = "draw",
|
||||
// UPLOAD = "upload",
|
||||
// }
|
||||
export enum TEMPORAL {
|
||||
DATE = "date",
|
||||
TIME = "time",
|
||||
DATE_TIME = "date_time",
|
||||
// YEAR = "year",
|
||||
// MONTH = "month",
|
||||
// WEEK = "week",
|
||||
}
|
||||
|
||||
enum NUMBER {
|
||||
INTEGER = "integer",
|
||||
DECIMAL = "decimal",
|
||||
CURRENCY = "currency"
|
||||
}
|
||||
// enum IMAGE {
|
||||
// STAMP = "stamp",
|
||||
// LOGO = "logo"
|
||||
// }
|
||||
|
||||
enum SELECT {
|
||||
SINGLE_SELECT = "single select",
|
||||
MULTI_SELECT = "multi select"
|
||||
}
|
||||
|
||||
|
||||
enum MASKTYPE {
|
||||
ALL = "all",
|
||||
LAST_FOUR = "last_four",
|
||||
CREDIT_CARD = "credit_Card",
|
||||
NATIONAL_INSURANCE = "national_insurance",
|
||||
SOCIAL_SECURITY = "social_security",
|
||||
SOCIAL_INSURANCE = "social_insurance"
|
||||
}
|
||||
|
||||
enum MASKCHARACTER {
|
||||
ASTERISK = "ASTERISK",
|
||||
DOT = "DOT",
|
||||
X = "CROSS",
|
||||
}
|
||||
|
||||
const enumMap = {
|
||||
text: TEXT,
|
||||
temporal: TEMPORAL,
|
||||
number: NUMBER,
|
||||
image: String,
|
||||
select: SELECT
|
||||
}
|
||||
|
||||
enum DROPDOWNTOGGLE {
|
||||
TYPE,
|
||||
MASK_TYPE,
|
||||
MASK_CHARACTER,
|
||||
DDMMYY_FORMAT
|
||||
}
|
||||
|
||||
const dateTimeFormatMap = {
|
||||
"date": dateFormats,
|
||||
"time": timeFormats,
|
||||
"date_time": dateTimeFormats,
|
||||
"year": yearFormats,
|
||||
"month": monthFormats,
|
||||
"week": weekFormats
|
||||
}
|
||||
|
||||
const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx }) => {
|
||||
console.log(selectedTag, "selectedTag Line 102")
|
||||
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
||||
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
|
||||
|
||||
// const [showFormatEg, setShowFormatEg] = useState<boolean>(false);
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
||||
const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
|
||||
|
||||
// const [selectedOptions, setSelectedOptions] = useState<string[]>([])
|
||||
|
||||
const [decimalPlace, setDecimalPlace] = useState<number>(2)
|
||||
const [selectedOption, setSelectedOption] = useState<string>()
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number) => {
|
||||
console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '' || changeWith === '') return
|
||||
|
||||
if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
|
||||
// let change: string = changeWith;
|
||||
// if (change === "DATE TIME") {
|
||||
// change = "DATE_TIME"
|
||||
// }
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: "id" in item ? true : false } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
} else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
console.log("Line 161")
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: "id" in item ? true : false } : item
|
||||
)
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
||||
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
||||
const isCurrency = changeWith === NUMBER.CURRENCY;
|
||||
// const currencyType = null
|
||||
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: "id" in item ? true : false } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
|
||||
} else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
let val = timeFormats[0].format;
|
||||
if (!is24Hrs) {
|
||||
val = timeFormats[1].format
|
||||
}
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: "id" in item ? true : false } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
|
||||
} else {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: "id" in item ? true : false } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
}
|
||||
setDropDownToggle(null)
|
||||
}
|
||||
|
||||
// const handleSelectTagOptions = () => {
|
||||
// if (!selectedOptions.length) return
|
||||
// setDroppedItems((prev) => (
|
||||
// {
|
||||
// ...prev,
|
||||
// [selTagKey]: Array.isArray(prev[selTagKey])
|
||||
// ? prev[selTagKey].map((item, i) => {
|
||||
// if (i === selTagIndx) {
|
||||
// return { ...item, options: [...selectedOptions] };
|
||||
// }
|
||||
// return item;
|
||||
// })
|
||||
// : [],
|
||||
// }
|
||||
// ));
|
||||
// }
|
||||
|
||||
// useEffect(() => {
|
||||
// handleSelectTagOptions();
|
||||
// }, [selectedOptions])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
|
||||
|
||||
if (selectedTag.subType === TEMPORAL.DATE) {
|
||||
handlePropertyChange("format", dateFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
handlePropertyChange("format", dateTimeFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.TIME) {
|
||||
handlePropertyChange("format", timeFormats[0].format)
|
||||
}
|
||||
}
|
||||
// else if(selectedTag.subType === TEXT.PASSWORD) {
|
||||
// handlePropertyChange("format", timeFormats[0].format)
|
||||
// }
|
||||
}, [selectedTag.subType])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.format === timeFormats[1].format && is24Hrs) {
|
||||
setIs24Hrs(false);
|
||||
} else if (selectedTag.format === timeFormats[0].format && !is24Hrs) {
|
||||
setIs24Hrs(true);
|
||||
}
|
||||
}, [selectedTag.format])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.label === "temporal") {
|
||||
handlePropertyChange("subType", TEMPORAL.DATE);
|
||||
handlePropertyChange("format", "DD/MM/YY");
|
||||
}
|
||||
}, [])
|
||||
|
||||
|
||||
const handleIs24HrsClick = (checked: boolean) => {
|
||||
if (selectedTag.subType === TEMPORAL.TIME) {
|
||||
if (!checked) {
|
||||
handlePropertyChange("format", timeFormats[1].format)
|
||||
} else {
|
||||
handlePropertyChange("format", timeFormats[0].format)
|
||||
}
|
||||
}
|
||||
setIs24Hrs(checked)
|
||||
}
|
||||
|
||||
|
||||
const handleIsCurrentTimeStamp = (checked: boolean) => {
|
||||
if (selectedTag.type.toLowerCase() === "temporal") {
|
||||
setIsCurrentTimeStamp(checked)
|
||||
handlePropertyChange("currentTimeStamp", checked);
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddSelectOption = () => {
|
||||
if (selectedOption && selectedOption.length) {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return { ...item, options: item.options ? [...item.options, selectedOption] : [selectedOption], update: "id" in item ? true : false };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleSelectOptionDel = (indx: number) => {
|
||||
// setSelectedOptions(prev =>
|
||||
// prev.filter((_, i) => i !== indx)
|
||||
// )
|
||||
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = Number(e.target.value)
|
||||
setDecimalPlace(val)
|
||||
handlePropertyChange("decimalPlace", val)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if ("styles" in selectedTag) {
|
||||
const fontSize = selectedTag?.styles?.textSize;
|
||||
const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
|
||||
console.log(fontSize, tagHeight, "Line 323", selectedTag?.styles)
|
||||
|
||||
if (selectedTag.subType !== "password" && selectedTag.subType !== "paragraph" && tagHeight > (fontSize + fontSize)) {
|
||||
console.log("Change subType Called from if")
|
||||
handlePropertyChange("subType", "paragraph")
|
||||
} else if (selectedTag.subType !== "password" && selectedTag.subType !== "single_line" && tagHeight <= (fontSize + fontSize)) {
|
||||
console.log("Change subType Called from elseif")
|
||||
handlePropertyChange("subType", "single_line")
|
||||
}
|
||||
}
|
||||
}, [selectedTag])
|
||||
|
||||
console.log("RightSideBar - selectedTag", selectedTag)
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Right Side Bar Start */}
|
||||
<div className='col-span-2 w-full h-full bg-white text-sm'>
|
||||
<p className="p-2 font-semibold text-md">Properties</p>
|
||||
<hr className="text-slate-200" />
|
||||
|
||||
<div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
|
||||
|
||||
{/* label */}
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Label</label>
|
||||
<input
|
||||
value={selectedTag.label}
|
||||
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
||||
type="text"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
||||
</div>
|
||||
|
||||
{/* Required */}
|
||||
{(selectedTag.type !== "signature" && selectedTag.type !== "initials") && <div className="flex justify-between items-center">
|
||||
<label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
|
||||
<input
|
||||
id="required"
|
||||
checked={selectedTag.required ? selectedTag.required : false}
|
||||
onChange={(e) => handlePropertyChange('required', e.target.checked)}
|
||||
type="checkbox"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
/>
|
||||
</div>}
|
||||
|
||||
{/* Use Current TimeStamp */}
|
||||
{selectedTag.type.toLowerCase() === "temporal" && <div className="flex justify-left items-center gap-1.5 mt-0.5">
|
||||
<label
|
||||
className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
|
||||
htmlFor="use_current_timestamp"
|
||||
>
|
||||
Use Current Timestamp
|
||||
</label>
|
||||
<input
|
||||
checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
|
||||
onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
|
||||
id="use_current_timestamp"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>}
|
||||
|
||||
{/* Type | SubType */}
|
||||
{selectedType && Object.keys(selectedType).length > 0 &&
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer">{selectedTag?.subType ? (selectedTag.subType === "date_time" ? "Date Time" : selectedTag.subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{Object.keys(selectedType).map((val, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
|
||||
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
|
||||
>
|
||||
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
{/* Mask Type */}
|
||||
{
|
||||
selectedTag?.subType === TEXT.PASSWORD &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Mask Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer">{(selectedTag.maskType && selectedTag.maskType.replace("_", " ")) ? selectedTag.maskType : MASKTYPE.ALL}</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{(Object.keys(MASKTYPE) as (keyof typeof MASKTYPE)[]).map((val, indx) =>
|
||||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
|
||||
className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{(MASKTYPE[val]).replace("_", " ")}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
{/* Mask Character - START */}
|
||||
{
|
||||
selectedTag?.subType === TEXT.PASSWORD &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Mask Character</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer py-1">
|
||||
{selectedTag?.maskCharacter
|
||||
?
|
||||
selectedTag.maskCharacter === MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
|
||||
selectedTag.maskCharacter === MASKCHARACTER.DOT && <GoDotFill /> ||
|
||||
selectedTag.maskCharacter === MASKCHARACTER.X && <IoClose />
|
||||
:
|
||||
<LuAsterisk />
|
||||
}
|
||||
</p>
|
||||
|
||||
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{(Object.keys(MASKCHARACTER) as (keyof typeof MASKCHARACTER)[]).map((val, indx) =>
|
||||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
|
||||
className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.ASTERISK &&
|
||||
<LuAsterisk />
|
||||
}
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.DOT &&
|
||||
<GoDotFill />
|
||||
}
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.X &&
|
||||
<IoClose />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
{/* Mask Character - END */}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{/* TEMPORAL DATE FORMAT - START */}
|
||||
{
|
||||
(selectedTag?.subType === TEMPORAL.DATE ||
|
||||
selectedTag?.subType === TEMPORAL.TIME ||
|
||||
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
|
||||
|
||||
<div>
|
||||
{/* <div className="flex justify-between">
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
checked={showFormatEg ? showFormatEg : false}
|
||||
onChange={(e) => setShowFormatEg(e.target.checked)}
|
||||
id="data_time_format"
|
||||
type="checkbox" />
|
||||
<label className="text-xs text-slate-400" htmlFor="data_time_format">
|
||||
Show Example
|
||||
</label>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
{(selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) &&
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
checked={is24Hrs ? is24Hrs : false}
|
||||
onChange={(e) => handleIs24HrsClick(e.target.checked)}
|
||||
id="data_time_format"
|
||||
type="checkbox" />
|
||||
<label className={`text-xs ${is24Hrs ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`} htmlFor="data_time_format">
|
||||
24 Hrs
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="cursor-pointer py-1">
|
||||
{selectedTag.format ? selectedTag.format : dateTimeFormatMap['date'][0].format}
|
||||
{/* {(selectedTag.subType !== TEMPORAL.DATE && selectedTag.subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
||||
</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
|
||||
{dateTimeFormatMap[selectedTag.subType].map((valObj, indx) => {
|
||||
// let val = showFormatEg ? valObj["example"] : valObj["format"]
|
||||
let val = valObj["format"]
|
||||
if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
if (is24Hrs) {
|
||||
val = val + " " + timeFormats[0].format;
|
||||
} else {
|
||||
val = val + " " + timeFormats[1].format;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("format", valObj["format"])}
|
||||
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{val}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
{selectedTag.format && <div className="pt-4">
|
||||
{/* <p>
|
||||
Example
|
||||
</p> */}
|
||||
<p className="text-center">{dayjs().format(selectedTag.format)}</p>
|
||||
</div>}
|
||||
</div>
|
||||
}
|
||||
{/* TEMPORAL DATE FORMAT - END */}
|
||||
|
||||
|
||||
|
||||
{/* NUMBER - DECIMAL PLACES */}
|
||||
{
|
||||
selectedTag?.subType === NUMBER.DECIMAL &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Decimal Places</label>
|
||||
<input
|
||||
type="number"
|
||||
onChange={(e) => handleDecimalPlace(e)}
|
||||
value={decimalPlace}
|
||||
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
{(selectedTag?.subType === "single select" || selectedTag?.subType === "multi select") &&
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="" className="">Add Options</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => setSelectedOption(e.target.value)}
|
||||
value={selectedOption}
|
||||
onKeyUp={(e) => {
|
||||
if (e.code === "Enter") {
|
||||
// if (selectedOption) {
|
||||
// setSelectedOptions((prev) => [...prev, selectedOption]);
|
||||
// setSelectedOption("");
|
||||
// }
|
||||
handleAddSelectOption()
|
||||
}
|
||||
}}
|
||||
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
||||
|
||||
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
|
||||
{
|
||||
selectedTag.options && selectedTag.options.map((val, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
|
||||
<p>{val}</p>
|
||||
<IoMdClose
|
||||
onClick={() =>
|
||||
// setSelectedOptions(prev =>
|
||||
// prev.filter((_, i) => i !== indx)
|
||||
// )
|
||||
handleSelectOptionDel(indx)
|
||||
}
|
||||
className="cursor-pointer text-slate-500 hover:text-slate-600" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Side Bar End */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightSideBar
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import { DROPDOWNTOGGLE } from './RightSideBar';
|
||||
|
||||
interface CommonAttrDropDownInt {
|
||||
selectedType: any;
|
||||
subType: string | undefined;
|
||||
dropDownToggle: DROPDOWNTOGGLE | null;
|
||||
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{dropDownToggle === DROPDOWNTOGGLE.TYPE &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{Object.keys(selectedType).map((val, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
|
||||
className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
|
||||
>
|
||||
{selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CommonAttrDropDown
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
interface CurrTimeStampAttrInt {
|
||||
type: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropertyChange}) => {
|
||||
|
||||
const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
|
||||
|
||||
const handleIsCurrentTimeStamp = (checked: boolean) => {
|
||||
if (type.toLowerCase() === "temporal") {
|
||||
setIsCurrentTimeStamp(checked)
|
||||
handlePropertyChange("currentTimeStamp", checked);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex justify-left items-center gap-1.5 mt-0.5">
|
||||
<label
|
||||
className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
|
||||
htmlFor="use_current_timestamp"
|
||||
>
|
||||
Use Current Timestamp
|
||||
</label>
|
||||
<input
|
||||
checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
|
||||
onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
|
||||
id="use_current_timestamp"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CurrTimeStampAttr
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import { FaArrowUp, FaArrowDown, FaArrowLeft, FaArrowRight, FaRegCircle } from 'react-icons/fa';
|
||||
|
||||
interface DirectionalControlsProps {
|
||||
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
selectedType: {
|
||||
left?: number;
|
||||
top?: number;
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
}
|
||||
|
||||
const DirectionalControls: React.FC<DirectionalControlsProps> = ({
|
||||
onMove,
|
||||
disabled = false,
|
||||
stepSize = 1,
|
||||
className = '',
|
||||
selectedType,
|
||||
}) => {
|
||||
const onMoveRef = useRef(onMove);
|
||||
|
||||
useEffect(() => {
|
||||
onMoveRef.current = onMove;
|
||||
}, [onMove]);
|
||||
|
||||
const handleMove = (direction: 'up' | 'down' | 'left' | 'right') => {
|
||||
if (!disabled) {
|
||||
onMoveRef.current(direction, stepSize);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (disabled) return;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
event.preventDefault();
|
||||
handleMove('up');
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
event.preventDefault();
|
||||
handleMove('down');
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
event.preventDefault();
|
||||
handleMove('left');
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
event.preventDefault();
|
||||
handleMove('right');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [disabled, stepSize]);
|
||||
|
||||
const buttonClass = `
|
||||
p-1 rounded-sm transition-all duration-200 border shadow-sm text-[10px]
|
||||
${disabled
|
||||
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
: 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'}
|
||||
flex items-center justify-center w-6 h-6
|
||||
`;
|
||||
|
||||
|
||||
const { top = 0, left = 0, width = 0, height = 0 } = selectedType || {};
|
||||
|
||||
const right = left + width;
|
||||
const bottom = top + height;
|
||||
|
||||
return (
|
||||
<div className={`grid grid-cols-3 grid-rows-1 text-[10px] text-gray-700 ${className}`}>
|
||||
{/* Top Row */}
|
||||
<div></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move up" type="button">
|
||||
<FaArrowUp size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Top: {Math.round(top)}px</span>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
{/* Middle Row */}
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move left" type="button">
|
||||
<FaArrowLeft size={12} />
|
||||
</button>
|
||||
<span className="mt-1">Left: {Math.round(left)}px</span>
|
||||
</div>
|
||||
|
||||
<div className="w-8 h-8 flex items-center justify-center text-xs text-gray-400 ps-5"><FaRegCircle/></div>
|
||||
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move right" type="button">
|
||||
<FaArrowRight size={12} />
|
||||
</button>
|
||||
{/* <span className="mt-1">Right: {Math.round(right)}px</span> */}
|
||||
</div>
|
||||
|
||||
{/* Bottom Row */}
|
||||
<div></div>
|
||||
<div className="flex flex-col items-center">
|
||||
<button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move down" type="button">
|
||||
<FaArrowDown size={12} />
|
||||
</button>
|
||||
{/* <span className="mt-1">Bottom: {Math.round(bottom)}px</span> */}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DirectionalControls;
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
interface LabelAttrInt {
|
||||
label: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="" className="">Label</label>
|
||||
<input
|
||||
value={label}
|
||||
onChange={(e) => handlePropertyChange('label', e.target.value)}
|
||||
type="text"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LabelAttr
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "./RightSideBar";
|
||||
import { LuAsterisk } from "react-icons/lu";
|
||||
import { GoDotFill } from "react-icons/go";
|
||||
import { IoClose } from "react-icons/io5";
|
||||
|
||||
interface MaskTypePassAttrInt {
|
||||
maskType: string;
|
||||
maskCharacter: string;
|
||||
dropDownToggle: DROPDOWNTOGGLE | null;
|
||||
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharacter, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
return (
|
||||
<>
|
||||
{/* Mask Type */}
|
||||
<div>
|
||||
<label htmlFor="" className="">Mask Type</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE ? null : DROPDOWNTOGGLE.MASK_TYPE)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer">{(maskType && maskType.replace("_", " ")) ? maskType : MASKTYPE.ALL}</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.MASK_TYPE &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{(Object.keys(MASKTYPE) as (keyof typeof MASKTYPE)[]).map((val, indx) =>
|
||||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
|
||||
className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{(MASKTYPE[val]).replace("_", " ")}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* Mask Character */}
|
||||
<div>
|
||||
<label htmlFor="" className="">Mask Character</label>
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER ? null : DROPDOWNTOGGLE.MASK_CHARACTER)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="capitalize cursor-pointer py-1">
|
||||
{maskCharacter
|
||||
?
|
||||
maskCharacter === MASKCHARACTER.ASTERISK && <LuAsterisk /> ||
|
||||
maskCharacter === MASKCHARACTER.DOT && <GoDotFill /> ||
|
||||
maskCharacter === MASKCHARACTER.X && <IoClose />
|
||||
:
|
||||
<LuAsterisk />
|
||||
}
|
||||
</p>
|
||||
|
||||
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.MASK_CHARACTER &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
|
||||
{(Object.keys(MASKCHARACTER) as (keyof typeof MASKCHARACTER)[]).map((val, indx) =>
|
||||
(
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
|
||||
className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.ASTERISK &&
|
||||
<LuAsterisk />
|
||||
}
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.DOT &&
|
||||
<GoDotFill />
|
||||
}
|
||||
{
|
||||
MASKCHARACTER[val] === MASKCHARACTER.X &&
|
||||
<IoClose />
|
||||
}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default MaskTypePassAttr
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import React, { useRef } from 'react';
|
||||
|
||||
interface MaxMinLenAttrIntr {
|
||||
maxLength: number;
|
||||
minLength: number;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, handlePropertyChange }) => {
|
||||
const firstChangedField = useRef<null | 'minLength' | 'maxLength'>(null);
|
||||
|
||||
const handleMaxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newMax = Number(e.target.value);
|
||||
if (!firstChangedField.current) {
|
||||
firstChangedField.current = 'maxLength';
|
||||
}
|
||||
|
||||
if (firstChangedField.current === 'minLength' && newMax < minLength) {
|
||||
alert(`Max Length must be greater than or equal to Min Length (${minLength})`);
|
||||
return;
|
||||
}
|
||||
|
||||
handlePropertyChange('maxLength', newMax);
|
||||
};
|
||||
|
||||
const handleMinChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newMin = Number(e.target.value);
|
||||
if (!firstChangedField.current) {
|
||||
firstChangedField.current = 'minLength';
|
||||
}
|
||||
|
||||
if (firstChangedField.current === 'maxLength' && newMin > maxLength) {
|
||||
alert(`Min Length must be less than or equal to Max Length (${maxLength})`);
|
||||
return;
|
||||
}
|
||||
|
||||
handlePropertyChange('minLength', newMin);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="maxLength">Max Length</label>
|
||||
<input
|
||||
id="maxLength"
|
||||
value={maxLength}
|
||||
type="number"
|
||||
min={0}
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
onChange={handleMaxChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label htmlFor="minLength">Min Length</label>
|
||||
<input
|
||||
id="minLength"
|
||||
value={minLength}
|
||||
type="number"
|
||||
min={0}
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
onChange={handleMinChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaxMinLenAttr;
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react'
|
||||
import { IoCheckmark } from 'react-icons/io5';
|
||||
import { MdKeyboardArrowDown } from 'react-icons/md';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { RootState } from '../../../../store/store';
|
||||
|
||||
|
||||
interface SelectedRecipientsIntr {
|
||||
id: number;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface RecipientsAttrConIntr {
|
||||
selectedRecipientId: number;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientId, handlePropertyChange }) => {
|
||||
|
||||
const [selectedRecipient, setSelectedRecipient] = useState(null);
|
||||
|
||||
const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
|
||||
const [dropDownToggle, setDropDownToggle] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedRecipients.length) {
|
||||
const filter = selectedRecipients.filter((obj, indx) => obj.id == selectedRecipientId)
|
||||
setSelectedRecipient(filter[0]);
|
||||
}
|
||||
}, [selectedRecipientId])
|
||||
|
||||
|
||||
if (!selectedRecipient) {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='relative'
|
||||
tabIndex={0}
|
||||
onBlur={() => setDropDownToggle(false)}>
|
||||
{/* Selected Recipient */}
|
||||
<div
|
||||
onClick={() => setDropDownToggle(!dropDownToggle)}
|
||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm border-1 border-slate-200 cursor-pointer'>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
|
||||
{/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
|
||||
<p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
|
||||
</div>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
|
||||
{selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
|
||||
return (<div
|
||||
key={indx}
|
||||
className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
|
||||
onClick={() => {
|
||||
handlePropertyChange('recipientId', recipient.id);
|
||||
setTimeout(() => {
|
||||
setDropDownToggle(false);
|
||||
}, 0)
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
|
||||
{/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
|
||||
<p>{recipient.firstName} {recipient.lastName} </p>
|
||||
</div>
|
||||
{selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
|
||||
</div>)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RecipientsAttrCon
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
interface RequiredAttrInt {
|
||||
required: boolean;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const RequiredAttr : React.FC<RequiredAttrInt> = ({required, handlePropertyChange}) => {
|
||||
return (
|
||||
<div className="flex justify-between items-center">
|
||||
<label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
|
||||
<input
|
||||
id="required"
|
||||
checked={required ? required : false}
|
||||
onChange={(e) => handlePropertyChange('required', e.target.checked)}
|
||||
type="checkbox"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RequiredAttr
|
||||
|
|
@ -1,472 +0,0 @@
|
|||
import { DroppedItemsObj } from "../DocumentContainer";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
|
||||
import { DroppedItem } from "../../../../utlity/types";
|
||||
import { IoIosArrowDown } from "react-icons/io";
|
||||
|
||||
import { TagsTypes } from "../../../../utlity/types";
|
||||
|
||||
import LabelAttr from "./LabelAttr";
|
||||
import RequiredAttr from "./RequiredAttr";
|
||||
import CurrTimeStampAttr from "./currTimeStampAttr";
|
||||
import CommonAttrDropDown from "./CommonAttrDropDown";
|
||||
import MaskTypePassAttr from "./MaskTypePassAttr";
|
||||
import TemporalDateAttr from "./TemporalDateAttr";
|
||||
import SelectTagAttr from "./SelectTagAttr";
|
||||
import MaxMinLenAttr from "./MaxMinLenAttr";
|
||||
import RecipientsAttrCon from "./RecipientsAttrCon";
|
||||
import MovableFieldContainer from "./MovableField";
|
||||
import DirectionalControls from "./DirectionalControls";
|
||||
|
||||
// interface DirectionalControlsProps {
|
||||
// onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
|
||||
// disabled?: boolean;
|
||||
// stepSize?: number;
|
||||
// className?: string;
|
||||
// }
|
||||
|
||||
export interface DroppedItemProps {
|
||||
selectedTag: DroppedItem
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
|
||||
selTagKey: string,
|
||||
selTagIndx: number,
|
||||
DirectionalControlsProps: {
|
||||
onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
|
||||
disabled?: boolean;
|
||||
stepSize?: number;
|
||||
className?: string;
|
||||
}
|
||||
}
|
||||
|
||||
export enum TEXT {
|
||||
PARAGRAPH = "paragraph",
|
||||
SINGLE_LINE = "single_line",
|
||||
PASSWORD = "password",
|
||||
}
|
||||
|
||||
export enum TEMPORAL {
|
||||
DATE = "date",
|
||||
TIME = "time",
|
||||
DATE_TIME = "date_time",
|
||||
}
|
||||
|
||||
export enum NUMBER {
|
||||
INTEGER = "integer",
|
||||
DECIMAL = "decimal",
|
||||
CURRENCY = "currency"
|
||||
}
|
||||
|
||||
export enum SELECT {
|
||||
SINGLE_SELECT = "single select",
|
||||
MULTI_SELECT = "multi select"
|
||||
}
|
||||
|
||||
export enum MASKTYPE {
|
||||
ALL = "all",
|
||||
LAST_FOUR = "last_four",
|
||||
CREDIT_CARD = "credit_Card",
|
||||
NATIONAL_INSURANCE = "national_insurance",
|
||||
SOCIAL_SECURITY = "social_security",
|
||||
SOCIAL_INSURANCE = "social_insurance"
|
||||
}
|
||||
|
||||
export enum MASKCHARACTER {
|
||||
ASTERISK = "ASTERISK",
|
||||
DOT = "DOT",
|
||||
X = "CROSS",
|
||||
}
|
||||
|
||||
export const enumMap = {
|
||||
text: TEXT,
|
||||
temporal: TEMPORAL,
|
||||
number: NUMBER,
|
||||
image: String,
|
||||
select: SELECT
|
||||
}
|
||||
|
||||
export enum DROPDOWNTOGGLE {
|
||||
TYPE,
|
||||
MASK_TYPE,
|
||||
MASK_CHARACTER,
|
||||
DDMMYY_FORMAT
|
||||
}
|
||||
|
||||
const defaultStyles = {
|
||||
font: "",
|
||||
italic: false,
|
||||
bold: false,
|
||||
underline: false,
|
||||
color: "#000000",
|
||||
textSize: 0
|
||||
};
|
||||
|
||||
|
||||
|
||||
const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => {
|
||||
|
||||
const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
|
||||
|
||||
console.log("selectedTag", selectedTag, selectedType)
|
||||
|
||||
|
||||
|
||||
const [styles, setStyles] = useState(defaultStyles);
|
||||
|
||||
const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
|
||||
const [decimalPlace, setDecimalPlace] = useState<number>(2)
|
||||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
|
||||
const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
|
||||
console.log("Handle Property Change Called", "changeTo", changeTo, "changeWith", changeWith)
|
||||
if (changeTo === '' || changeWith === '') return
|
||||
|
||||
if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
|
||||
// let change: string = changeWith;
|
||||
// if (change === "DATE TIME") {
|
||||
// change = "DATE_TIME"
|
||||
// }
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
} else if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
|
||||
console.log("Line 161")
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
|
||||
)
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
|
||||
let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
|
||||
const isCurrency = changeWith === NUMBER.CURRENCY;
|
||||
// const currencyType = null
|
||||
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
|
||||
} else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
let val = timeFormats[0].format;
|
||||
if (!is24Hrs) {
|
||||
val = timeFormats[1].format
|
||||
}
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: true } : item
|
||||
)
|
||||
: [],
|
||||
}// Provide a fallback in case it's undefined or not an array
|
||||
));
|
||||
|
||||
} else {
|
||||
setDroppedItems((prev) => {
|
||||
console.log('Previous state:', prev);
|
||||
|
||||
const updatedItems = Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) =>
|
||||
i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
|
||||
)
|
||||
: [];
|
||||
|
||||
console.log('Updated items:', updatedItems);
|
||||
|
||||
return {
|
||||
...prev,
|
||||
[selTagKey]: updatedItems,
|
||||
};
|
||||
});
|
||||
|
||||
}
|
||||
setDropDownToggle(null)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
|
||||
|
||||
if (selectedTag.subType === TEMPORAL.DATE) {
|
||||
handlePropertyChange("format", dateFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
|
||||
handlePropertyChange("format", dateTimeFormats[0].format)
|
||||
}
|
||||
else if (selectedTag.subType === TEMPORAL.TIME) {
|
||||
handlePropertyChange("format", timeFormats[0].format)
|
||||
}
|
||||
}
|
||||
}, [selectedTag.subType])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTag.label === "temporal") {
|
||||
handlePropertyChange("subType", TEMPORAL.DATE);
|
||||
handlePropertyChange("format", "DD/MM/YY");
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const val = Number(e.target.value)
|
||||
setDecimalPlace(val)
|
||||
handlePropertyChange("decimalPlace", val)
|
||||
}
|
||||
|
||||
// useEffect(() => {
|
||||
// if ("styles" in selectedTag) {
|
||||
// console.log("styles" in selectedTag)
|
||||
// const fontSize = selectedTag?.styles?.textSize;
|
||||
// const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
// console.log(fontSize)
|
||||
|
||||
// if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.PARAGRAPH && tagHeight > (fontSize + fontSize)) {
|
||||
// handlePropertyChange("subType", TEXT.PARAGRAPH)
|
||||
// } else if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.SINGLE_LINE && tagHeight <= (fontSize + fontSize)) {
|
||||
// console.log("Change subType Called from elseif")
|
||||
// handlePropertyChange("subType", TEXT.SINGLE_LINE)
|
||||
// }
|
||||
// }
|
||||
// }, [selectedTag])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedTag) return;
|
||||
|
||||
if (!selectedTag.styles) {
|
||||
handlePropertyChange("styles", defaultStyles);
|
||||
setStyles(defaultStyles);
|
||||
} else {
|
||||
setStyles({ ...defaultStyles, ...selectedTag.styles });
|
||||
}
|
||||
|
||||
// Optional subType logic
|
||||
const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
|
||||
const tagHeight = selectedTag?.dimensions?.height - 18;
|
||||
|
||||
if (
|
||||
selectedTag.subType !== TEXT.PASSWORD &&
|
||||
selectedTag.subType !== TEXT.PARAGRAPH &&
|
||||
tagHeight > fontSize * 2
|
||||
) {
|
||||
handlePropertyChange("subType", TEXT.PARAGRAPH);
|
||||
} else if (
|
||||
selectedTag.subType !== TEXT.PASSWORD &&
|
||||
selectedTag.subType !== TEXT.SINGLE_LINE &&
|
||||
tagHeight <= fontSize * 2
|
||||
) {
|
||||
handlePropertyChange("subType", TEXT.SINGLE_LINE);
|
||||
}
|
||||
}, [selectedTag]);
|
||||
|
||||
const handleStyleChange = (key, value) => {
|
||||
const updatedStyles = {
|
||||
...(selectedTag.styles ?? defaultStyles),
|
||||
[key]: value
|
||||
};
|
||||
setStyles(updatedStyles);
|
||||
handlePropertyChange("styles", updatedStyles);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Right Side Bar Start */}
|
||||
<div className='col-span-2 w-full h-full bg-white text-sm overflow-y-auto'>
|
||||
<p className="p-2 font-semibold text-md">Properties</p>
|
||||
<hr className="text-slate-200" />
|
||||
|
||||
<div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
|
||||
|
||||
{
|
||||
<RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
<DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions}/>
|
||||
|
||||
|
||||
{selectedTag.label &&
|
||||
<LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
{(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
|
||||
|
||||
<>
|
||||
<RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
|
||||
</>
|
||||
|
||||
|
||||
}
|
||||
|
||||
{selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />}
|
||||
|
||||
{
|
||||
selectedType && Object.keys(selectedType).length > 0 &&
|
||||
<CommonAttrDropDown
|
||||
selectedType={selectedType}
|
||||
subType={selectedTag.subType}
|
||||
dropDownToggle={dropDownToggle}
|
||||
setDropDownToggle={setDropDownToggle}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
{/* Mask Type */}
|
||||
{
|
||||
selectedTag?.subType === TEXT.PASSWORD &&
|
||||
<MaskTypePassAttr
|
||||
maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
|
||||
maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
|
||||
dropDownToggle={dropDownToggle}
|
||||
setDropDownToggle={setDropDownToggle}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
|
||||
{/* TEMPORAL DATE FORMAT - START */}
|
||||
{
|
||||
(selectedTag?.subType === TEMPORAL.DATE ||
|
||||
selectedTag?.subType === TEMPORAL.TIME ||
|
||||
selectedTag?.subType === TEMPORAL.DATE_TIME) &&
|
||||
<TemporalDateAttr
|
||||
subType={selectedTag.subType}
|
||||
format={selectedTag.format}
|
||||
dropDownToggle={dropDownToggle}
|
||||
setDropDownToggle={setDropDownToggle}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
{/* TEMPORAL DATE FORMAT - END */}
|
||||
|
||||
{/* NUMBER - DECIMAL PLACES */}
|
||||
{
|
||||
selectedTag?.subType === NUMBER.DECIMAL &&
|
||||
<div>
|
||||
<label htmlFor="" className="">Decimal Places</label>
|
||||
<input
|
||||
type="number"
|
||||
onChange={(e) => handleDecimalPlace(e)}
|
||||
value={decimalPlace}
|
||||
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
(selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) &&
|
||||
<SelectTagAttr
|
||||
options={selectedTag.options}
|
||||
selTagKey={selTagKey}
|
||||
selTagIndx={selTagIndx}
|
||||
setDroppedItems={setDroppedItems}
|
||||
handlePropertyChange={handlePropertyChange} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
(selectedTag.type.toLowerCase() === TagsTypes.TEXT || selectedTag.type.toLowerCase() === TagsTypes.COMPANY) &&
|
||||
<MaxMinLenAttr maxLength={selectedTag.maxLength} minLength={selectedTag.minLength} handlePropertyChange={handlePropertyChange} />
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
{
|
||||
<div className="">
|
||||
<div className="flex items-center justify-between mr-2 cursor-pointer"
|
||||
onClick={() => setStyleOpen(!styleOpen)}
|
||||
>
|
||||
<label
|
||||
className="block mb-2">Styles</label>
|
||||
<IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
|
||||
</div>
|
||||
{
|
||||
styleOpen && <>
|
||||
{/* Font */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Font</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Arial"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
value={styles.font}
|
||||
onChange={(e) => handleStyleChange("font", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Text Size */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Text Size</label>
|
||||
<input
|
||||
// value={}
|
||||
type="number"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
value={styles.textSize}
|
||||
onChange={(e) =>
|
||||
handleStyleChange("textSize", parseInt(e.target.value, 10) || 0)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Color</label>
|
||||
<input
|
||||
type="color"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200 w-10 h-8"
|
||||
value={styles.color}
|
||||
onChange={(e) => handleStyleChange("color", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Toggles for Bold, Italic, Underline */}
|
||||
<div className="flex gap-4 items-center mt-2">
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.bold}
|
||||
onChange={(e) => handleStyleChange("bold", e.target.checked)} />
|
||||
Bold
|
||||
</label>
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.italic} onChange={(e) => handleStyleChange("italic", e.target.checked)} />
|
||||
Italic
|
||||
</label>
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.underline}
|
||||
onChange={(e) =>
|
||||
handleStyleChange("underline", e.target.checked)
|
||||
} />
|
||||
Underline
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* Right Side Bar End */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightSideBar
|
||||
|
|
@ -1,105 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import { DROPDOWNTOGGLE } from "./RightSideBar";
|
||||
import { DroppedItemsObj } from "../DocumentContainer";
|
||||
import { IoMdClose } from "react-icons/io";
|
||||
|
||||
interface SelectTagAttrInt {
|
||||
options: string[] | undefined;
|
||||
selTagKey: string;
|
||||
selTagIndx: number;
|
||||
setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
}
|
||||
|
||||
const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
|
||||
const [selectedOption, setSelectedOption] = useState<string>()
|
||||
|
||||
const handleAddSelectOption = () => {
|
||||
if (selectedOption && selectedOption.length) {
|
||||
setDroppedItems((prev) => {
|
||||
console.log("Previous droppedItems:", prev);
|
||||
|
||||
const newState = {
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return {
|
||||
...item,
|
||||
options: item.options ? [...item.options, selectedOption] : [selectedOption],
|
||||
update: true,
|
||||
};
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
};
|
||||
|
||||
console.log("New droppedItems state:", newState);
|
||||
return newState;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleSelectOptionDel = (indx: number) => {
|
||||
setDroppedItems((prev) => (
|
||||
{
|
||||
...prev,
|
||||
[selTagKey]: Array.isArray(prev[selTagKey])
|
||||
? prev[selTagKey].map((item, i) => {
|
||||
if (i === selTagIndx) {
|
||||
return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
|
||||
}
|
||||
return item;
|
||||
})
|
||||
: [],
|
||||
}
|
||||
));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<label htmlFor="" className="">Add Options</label>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => setSelectedOption(e.target.value)}
|
||||
value={selectedOption}
|
||||
onKeyUp={(e) => {
|
||||
if (e.code === "Enter") {
|
||||
// if (selectedOption) {
|
||||
// setSelectedOptions((prev) => [...prev, selectedOption]);
|
||||
// setSelectedOption("");
|
||||
// }
|
||||
handleAddSelectOption()
|
||||
}
|
||||
}}
|
||||
className="bg-slate-100 w-full outline-none p-2 rounded" />
|
||||
|
||||
<div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
|
||||
{
|
||||
options && options.map((val, indx) => (
|
||||
<div
|
||||
key={indx}
|
||||
className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
|
||||
<p>{val}</p>
|
||||
<IoMdClose
|
||||
onClick={() =>
|
||||
// setSelectedOptions(prev =>
|
||||
// prev.filter((_, i) => i !== indx)
|
||||
// )
|
||||
handleSelectOptionDel(indx)
|
||||
}
|
||||
className="cursor-pointer text-slate-500 hover:text-slate-600" />
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectTagAttr
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
import { useEffect, useState } from "react";
|
||||
import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
|
||||
import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
|
||||
import { MdKeyboardArrowDown } from "react-icons/md";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const dateTimeFormatMap = {
|
||||
"date": dateFormats,
|
||||
"time": timeFormats,
|
||||
"date_time": dateTimeFormats,
|
||||
"year": yearFormats,
|
||||
"month": monthFormats,
|
||||
"week": weekFormats
|
||||
}
|
||||
|
||||
interface TemporalDateAttrInt {
|
||||
subType: string;
|
||||
format: string | undefined;
|
||||
dropDownToggle: DROPDOWNTOGGLE | null;
|
||||
setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
|
||||
}
|
||||
|
||||
const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
|
||||
const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
|
||||
|
||||
const handleIs24HrsClick = (checked: boolean) => {
|
||||
if (subType === TEMPORAL.TIME) {
|
||||
if (!checked) {
|
||||
handlePropertyChange("format", timeFormats[1].format, is24Hrs)
|
||||
} else {
|
||||
handlePropertyChange("format", timeFormats[0].format, is24Hrs)
|
||||
}
|
||||
}
|
||||
setIs24Hrs(checked)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (format === timeFormats[1].format && is24Hrs) {
|
||||
setIs24Hrs(false);
|
||||
} else if (format === timeFormats[0].format && !is24Hrs) {
|
||||
setIs24Hrs(true);
|
||||
}
|
||||
}, [format])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between">
|
||||
<label htmlFor="" className="">Formats</label>
|
||||
{(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) &&
|
||||
<div className="flex justify-center items-center gap-1.5">
|
||||
<input
|
||||
checked={is24Hrs ? is24Hrs : false}
|
||||
onChange={(e) => handleIs24HrsClick(e.target.checked)}
|
||||
id="data_time_format"
|
||||
type="checkbox" />
|
||||
<label className={`text-xs ${is24Hrs ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`} htmlFor="data_time_format">
|
||||
24 Hrs
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT ? null : DROPDOWNTOGGLE.DDMMYY_FORMAT)}
|
||||
className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
|
||||
<p className="cursor-pointer py-1">
|
||||
{format ? format : dateTimeFormatMap['date'][0].format}
|
||||
{/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
|
||||
</p>
|
||||
<MdKeyboardArrowDown />
|
||||
</div>
|
||||
|
||||
{
|
||||
dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
|
||||
<div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
|
||||
{dateTimeFormatMap[subType].map((valObj, indx) => {
|
||||
// let val = showFormatEg ? valObj["example"] : valObj["format"]
|
||||
let val = valObj["format"]
|
||||
if (subType === TEMPORAL.DATE_TIME) {
|
||||
if (is24Hrs) {
|
||||
val = val + " " + timeFormats[0].format;
|
||||
} else {
|
||||
val = val + " " + timeFormats[1].format;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div
|
||||
key={indx}
|
||||
onClick={() => handlePropertyChange("format", valObj["format"])}
|
||||
className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
|
||||
>
|
||||
{val}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
{format && <div className="pt-4">
|
||||
<p className="text-center">{dayjs().format(format)}</p>
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TemporalDateAttr
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
interface SubSection {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface AsideSectionProps {
|
||||
activeSubSection: string;
|
||||
onSubSectionClick: (subSectionId: string) => void;
|
||||
subSections: SubSection[];
|
||||
mainTabTitle: string;
|
||||
}
|
||||
|
||||
const AsideSection = ({
|
||||
activeSubSection,
|
||||
onSubSectionClick,
|
||||
subSections,
|
||||
mainTabTitle
|
||||
}: AsideSectionProps) => {
|
||||
// If no subsections, don't render the aside navigation
|
||||
if (subSections.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-[16vw] p-4">
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800">{mainTabTitle}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">Navigate through sections</p>
|
||||
</div>
|
||||
|
||||
<nav className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{subSections.map((subSection) => (
|
||||
<a
|
||||
key={subSection.id}
|
||||
href={`#${subSection.id}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // Prevent default anchor behavior
|
||||
onSubSectionClick(subSection.id);
|
||||
}}
|
||||
className={`block w-full text-left px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 hover:bg-gray-50 cursor-pointer no-underline ${
|
||||
activeSubSection === subSection.id
|
||||
? "bg-blue-50 text-blue-600 border-l-4 border-blue-600 shadow-sm"
|
||||
: "text-gray-600 hover:text-gray-800 hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<span className="block">{subSection.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AsideSection;
|
||||
|
|
@ -1,342 +0,0 @@
|
|||
import React, { useRef, useState } from 'react';
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
|
||||
export type ActionType = 'create' | 'invite';
|
||||
|
||||
type CreateData = { accountName: string };
|
||||
type InviteData = { i_accountName: number; email: string; role: string };
|
||||
|
||||
export type FormDataType = CreateData | InviteData;
|
||||
|
||||
interface AccountOption {
|
||||
userId: number;
|
||||
userEmail: string;
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onSubmit: (data: FormDataType, action: ActionType) => void;
|
||||
createAndInviteLoader: boolean;
|
||||
accountOptions: AccountOption[];
|
||||
accountOptionsLoading: boolean;
|
||||
}
|
||||
|
||||
const CreateAndInvite = ({
|
||||
onSubmit,
|
||||
createAndInviteLoader,
|
||||
accountOptions,
|
||||
accountOptionsLoading
|
||||
}: Props) => {
|
||||
const [isRoleDropdownOpen, setIsRoleDropdownOpen] = useState(false);
|
||||
const [isAccountDropdownOpen, setIsAccountDropdownOpen] = useState(false);
|
||||
const roleDropdownRef = useRef<HTMLDivElement>(null);
|
||||
const accountDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [createFormData, setCreateFormData] = useState<{ accountName: string }>({
|
||||
accountName: '',
|
||||
});
|
||||
|
||||
const [accountSearchTerm, setAccountSearchTerm] = useState('');
|
||||
const [selectedAccount, setSelectedAccount] = useState<AccountOption | null>(null);
|
||||
|
||||
const [inviteFormData, setInviteFormData] = useState<{
|
||||
i_accountName: number;
|
||||
email: string;
|
||||
role: string;
|
||||
}>({
|
||||
i_accountName: 0,
|
||||
email: '',
|
||||
role: '',
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const roles = ['ADMIN', 'EDITOR', 'VIEWER'];
|
||||
|
||||
// Handle role dropdown
|
||||
const handleRoleDropdownFocus = () => setIsRoleDropdownOpen(true);
|
||||
|
||||
const handleRoleDropdownBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
setTimeout(() => {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (roleDropdownRef.current && !roleDropdownRef.current.contains(activeElement)) {
|
||||
setIsRoleDropdownOpen(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleRoleSelect = (role: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, role }));
|
||||
setIsRoleDropdownOpen(false);
|
||||
};
|
||||
|
||||
// Handle account dropdown
|
||||
const handleAccountDropdownFocus = () => setIsAccountDropdownOpen(true);
|
||||
|
||||
const handleAccountDropdownBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
||||
setTimeout(() => {
|
||||
const activeElement = document.activeElement as HTMLElement;
|
||||
if (accountDropdownRef.current && !accountDropdownRef.current.contains(activeElement)) {
|
||||
setIsAccountDropdownOpen(false);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleAccountSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setAccountSearchTerm(value);
|
||||
|
||||
// Clear selected account if user is typing
|
||||
if (selectedAccount && value !== selectedAccount.accountName) {
|
||||
setSelectedAccount(null);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: 0 }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccountSelect = (option: AccountOption) => {
|
||||
setSelectedAccount(option);
|
||||
setAccountSearchTerm(option.accountName);
|
||||
setInviteFormData((prev) => ({ ...prev, i_accountName: option.accountId }));
|
||||
setIsAccountDropdownOpen(false);
|
||||
|
||||
// Clear any existing account name error
|
||||
if (errors.i_accountName) {
|
||||
setErrors(prev => ({ ...prev, i_accountName: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle create form
|
||||
const handleCreateChange = (value: string) => {
|
||||
setCreateFormData({ accountName: value });
|
||||
// Clear error when user starts typing
|
||||
if (errors.accountName) {
|
||||
setErrors(prev => ({ ...prev, accountName: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateSubmit = () => {
|
||||
if (!createFormData.accountName.trim()) {
|
||||
setErrors({ accountName: 'Account name is required' });
|
||||
return;
|
||||
}
|
||||
setErrors({});
|
||||
onSubmit(createFormData, 'create');
|
||||
};
|
||||
|
||||
// Handle invite form
|
||||
const handleInviteChange = (field: keyof typeof inviteFormData, value: string) => {
|
||||
setInviteFormData((prev) => ({ ...prev, [field]: value }));
|
||||
// Clear error when user starts typing
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleInviteSubmit = () => {
|
||||
const { i_accountName, email, role } = inviteFormData;
|
||||
const errs: { [key: string]: string } = {};
|
||||
|
||||
if (!i_accountName) errs.i_accountName = 'Account name is required';
|
||||
if (!email.trim()) errs.email = 'Email is required';
|
||||
else if (!/\S+@\S+\.\S+/.test(email)) errs.email = 'Invalid email';
|
||||
if (!role.trim()) errs.role = 'Role is required';
|
||||
|
||||
if (Object.keys(errs).length > 0) {
|
||||
setErrors(errs);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
onSubmit(inviteFormData, 'invite');
|
||||
};
|
||||
|
||||
// Filter account options based on search term
|
||||
const filteredAccountOptions = accountOptions.filter((option) =>
|
||||
option.accountName?.toLowerCase().includes(accountSearchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="ms-2 space-y-3">
|
||||
{/* Create Section */}
|
||||
<section className="border-gray-200 border-b">
|
||||
<h2 className="text-lg font-medium mb-2 text-slate-500">Create Account</h2>
|
||||
<div className="flex flex-col mb-6">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
Account Name
|
||||
</label>
|
||||
<div className="flex w-[40vw]">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter account name"
|
||||
value={createFormData.accountName}
|
||||
onChange={(e) => handleCreateChange(e.target.value)}
|
||||
className="flex-1 px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSubmit}
|
||||
className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
{createAndInviteLoader ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin me-1" />
|
||||
CREATING...
|
||||
</>
|
||||
) : (
|
||||
'CREATE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.accountName && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.accountName}</span>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Invite Section */}
|
||||
<section className="border-gray-300">
|
||||
<h2 className="text-lg font-medium mb-2 text-slate-500">Invite</h2>
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
{/* Account Name Dropdown */}
|
||||
<div className="flex flex-col relative">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
Account Name
|
||||
</label>
|
||||
<div
|
||||
className="relative w-full"
|
||||
onBlur={handleAccountDropdownBlur}
|
||||
ref={accountDropdownRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={accountOptionsLoading ? "Loading accounts..." : "Select or search account"}
|
||||
value={accountSearchTerm}
|
||||
onChange={handleAccountSearchChange}
|
||||
onFocus={handleAccountDropdownFocus}
|
||||
disabled={accountOptionsLoading}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
/>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{accountOptionsLoading && (
|
||||
<div className="absolute right-3 top-1/2 transform -translate-y-1/2">
|
||||
<FaSpinner className="animate-spin text-gray-400 text-sm" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Account Dropdown */}
|
||||
{isAccountDropdownOpen && !accountOptionsLoading && (
|
||||
<div className="absolute w-full bg-white border border-gray-300 rounded-md mt-1 shadow-lg z-10">
|
||||
<ul className="max-h-40 overflow-y-auto">
|
||||
{filteredAccountOptions.length > 0 ? (
|
||||
filteredAccountOptions.map((option) => (
|
||||
<li
|
||||
key={option.accountId}
|
||||
onMouseDown={() => handleAccountSelect(option)}
|
||||
className="px-3 py-2 text-[13px] text-gray-600 hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<span>{option.accountName}</span>
|
||||
</div>
|
||||
</li>
|
||||
))
|
||||
) : (
|
||||
<li className="px-3 py-2 text-gray-500">No results found</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{errors.i_accountName && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.i_accountName}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email */}
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Enter email address"
|
||||
value={inviteFormData.email}
|
||||
onChange={(e) => handleInviteChange('email', e.target.value)}
|
||||
className="w-full px-3 py-1.5 text-gray-600 rounded-md border border-gray-400 focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
|
||||
/>
|
||||
{errors.email && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.email}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Role Dropdown */}
|
||||
<div className="flex flex-col">
|
||||
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
|
||||
Role
|
||||
</label>
|
||||
<div
|
||||
className="relative w-full"
|
||||
onBlur={handleRoleDropdownBlur}
|
||||
ref={roleDropdownRef}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Select role"
|
||||
value={inviteFormData.role}
|
||||
readOnly
|
||||
onFocus={handleRoleDropdownFocus}
|
||||
className="w-full px-3 py-1.5 border text-gray-600 border-gray-400 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-[var(--primary)] transition cursor-pointer"
|
||||
/>
|
||||
<div
|
||||
className={`absolute z-10 w-full bg-white text-slate-500 font-semibold border border-gray-200 rounded-md shadow-lg mt-1 transition-all duration-200 ease-in-out ${
|
||||
isRoleDropdownOpen
|
||||
? 'opacity-100 scale-100'
|
||||
: 'opacity-0 scale-95 pointer-events-none'
|
||||
}`}
|
||||
>
|
||||
{roles.map((role) => (
|
||||
<div
|
||||
key={role}
|
||||
onMouseDown={() => handleRoleSelect(role)}
|
||||
className="px-4 py-1 text-[13px] hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
{role}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{errors.role && (
|
||||
<span className="text-sm text-red-500 mt-1">{errors.role}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleInviteSubmit}
|
||||
className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
{createAndInviteLoader ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin me-1" />
|
||||
INVITING...
|
||||
</>
|
||||
) : (
|
||||
'INVITE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateAndInvite;
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface UserProfileProps {
|
||||
userData: UserData;
|
||||
}
|
||||
|
||||
const Language : React.FC<UserProfileProps> = ({ userData }) => {
|
||||
return (
|
||||
<div className="max-w-[100vw] bg-white shadow-sm p-5 max-h-screen overflow-hidden">
|
||||
|
||||
<div className="px-3 ms-3 w-1/2 border border-gray-200 rounded-md space-y-3 ">
|
||||
|
||||
{/* Language */}
|
||||
<div className="flex items-center justify-between py-3 border-b border-gray-100">
|
||||
<span className="text-gray-700 font-medium">Language</span>
|
||||
<span className="text-gray-500">{userData.language}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Language
|
||||
|
|
@ -1,434 +1,67 @@
|
|||
import { useEffect, useState, useRef } from "react";
|
||||
import { useState } from "react";
|
||||
import SettingNav from "./SettingNav";
|
||||
import { useParams, useLocation, useNavigate } from "react-router-dom";
|
||||
import api from "../../config/api";
|
||||
import UserProfile from './UserProfile';
|
||||
import Language from "./Language";
|
||||
import CreateAndInvite, { ActionType, FormDataType } from './CreateAndInvite'
|
||||
import AsideSection from "./AsideSection";
|
||||
import Signature from "./Signature/Signature";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import AccountNav from "../accounts/AccountNav";
|
||||
|
||||
// Define the shape of state object
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface SubSection {
|
||||
id: string;
|
||||
label: string;
|
||||
component?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface AccountOption {
|
||||
userId: number;
|
||||
userEmail: string;
|
||||
accountId: number;
|
||||
accountName: string;
|
||||
role: string;
|
||||
status: string;
|
||||
}
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
const Setting = () => {
|
||||
const { page1 } = useParams<{ page1: string }>();
|
||||
console.log("page1", page1)
|
||||
const location = useLocation();
|
||||
console.log("location", location)
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
||||
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
||||
);
|
||||
|
||||
// Refs for subsections within each main tab
|
||||
const subSectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [activeTab, setActiveTab] = useState("userProfile");
|
||||
const [activeSubSection, setActiveSubSection] = useState<string>("");
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: '',
|
||||
name: '',
|
||||
email: '',
|
||||
language: '',
|
||||
account: {
|
||||
id: 0,
|
||||
isDefault: false,
|
||||
name: '',
|
||||
},
|
||||
});
|
||||
|
||||
const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
|
||||
|
||||
// Dropdown data states
|
||||
const [accountOptions, setAccountOptions] = useState<AccountOption[]>([]);
|
||||
const [accountOptionsLoading, setAccountOptionsLoading] = useState(false);
|
||||
|
||||
// Define subsections for each main tab
|
||||
const getSubSections = (tabId: string): SubSection[] => {
|
||||
switch (tabId) {
|
||||
case "userProfile":
|
||||
return [
|
||||
{ id: "profile-info", label: "Profile Information" },
|
||||
{ id: "signature", label: "Signature" },
|
||||
];
|
||||
default:
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Function to scroll to specific subsection
|
||||
const scrollToSubSection = (subSectionId: string) => {
|
||||
const targetRef = subSectionRefs.current[subSectionId];
|
||||
|
||||
if (targetRef && scrollContainerRef?.current) {
|
||||
const container = scrollContainerRef.current;
|
||||
const target = targetRef;
|
||||
|
||||
// Calculate the position relative to the scroll container
|
||||
const containerRect = container.getBoundingClientRect();
|
||||
const targetRect = target.getBoundingClientRect();
|
||||
|
||||
// Calculate scroll position (accounting for some padding)
|
||||
const scrollTop = container.scrollTop + targetRect.top - containerRect.top - 20;
|
||||
|
||||
// Smooth scroll to the target
|
||||
container.scrollTo({
|
||||
top: scrollTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Handle subsection click with hash update
|
||||
const handleSubSectionClick = (subSectionId: string) => {
|
||||
setActiveSubSection(subSectionId);
|
||||
// Update URL hash without causing page reload
|
||||
navigate(`${location.pathname}#${subSectionId}`, { replace: true });
|
||||
scrollToSubSection(subSectionId);
|
||||
};
|
||||
|
||||
// Handle main tab click (independent of aside navigation)
|
||||
const handleMainTabClick = (tabId: string) => {
|
||||
setActiveTab(tabId);
|
||||
// Reset subsection when switching main tabs
|
||||
const subSections = getSubSections(tabId);
|
||||
if (subSections.length > 0) {
|
||||
const firstSubSectionId = subSections[0].id;
|
||||
setActiveSubSection(firstSubSectionId);
|
||||
// Update URL hash
|
||||
navigate(`${location.pathname}#${firstSubSectionId}`, { replace: true });
|
||||
} else {
|
||||
setActiveSubSection("");
|
||||
// Clear hash
|
||||
navigate(location.pathname, { replace: true });
|
||||
}
|
||||
};
|
||||
|
||||
// Handle browser back/forward and direct URL navigation
|
||||
useEffect(() => {
|
||||
const hash = location.hash.replace('#', '');
|
||||
if (hash) {
|
||||
// Check if the hash corresponds to a valid subsection
|
||||
const allSubSections = getSubSections(activeTab);
|
||||
const validSubSection = allSubSections.find(section => section.id === hash);
|
||||
|
||||
if (validSubSection) {
|
||||
setActiveSubSection(hash);
|
||||
// Delay scroll to ensure component is rendered
|
||||
setTimeout(() => {
|
||||
scrollToSubSection(hash);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}, [location.hash, activeTab]);
|
||||
|
||||
// Fetch account list for dropdown
|
||||
const getAccountList = async () => {
|
||||
setAccountOptionsLoading(true);
|
||||
try {
|
||||
const res = await api.get('/api/user/accounts');
|
||||
if (res?.data) {
|
||||
setAccountOptions(res.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching account options:', error);
|
||||
} finally {
|
||||
setAccountOptionsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Render subsection content based on active tab and subsection
|
||||
const renderSubSectionContent = (subSectionId: string) => {
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case "userProfile":
|
||||
switch (subSectionId) {
|
||||
case "profile-info":
|
||||
return <UserProfile userData={user} />;
|
||||
case "signature":
|
||||
return (
|
||||
<Signature />
|
||||
);
|
||||
default:
|
||||
return;
|
||||
}
|
||||
return <div>User Profile content goes here...</div>;
|
||||
case "language":
|
||||
return <div>Language settings content goes here...</div>;
|
||||
case "contactAll":
|
||||
return <div>All Contacts content goes here...</div>;
|
||||
case "contactAdd":
|
||||
return <div>Add Contact form goes here...</div>;
|
||||
case "contactRemove":
|
||||
return <div>Remove Contact UI goes here...</div>;
|
||||
case "contactShare":
|
||||
return <div>Share Contact options go here...</div>;
|
||||
default:
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm">
|
||||
<h3 className="text-lg font-semibold mb-4">Coming Soon</h3>
|
||||
<p>This section is under development.</p>
|
||||
</div>
|
||||
);
|
||||
return <div>Coming Soon...</div>;
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
const currentSubSections = getSubSections(activeTab);
|
||||
|
||||
if (currentSubSections.length === 0) {
|
||||
// If no subsections, render the main content directly
|
||||
switch (activeTab) {
|
||||
case "userProfile":
|
||||
return <UserProfile userData={user} />;
|
||||
case "language":
|
||||
return <Language userData={user} />;
|
||||
case "create and invite":
|
||||
return (
|
||||
<CreateAndInvite
|
||||
onSubmit={handleSubmit}
|
||||
createAndInviteLoader={createAndInviteLoader}
|
||||
accountOptions={accountOptions}
|
||||
accountOptionsLoading={accountOptionsLoading}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return <div className="bg-white p-6 rounded-lg shadow-sm">Coming Soon...</div>;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{currentSubSections.map((subSection) => (
|
||||
<div
|
||||
key={subSection.id}
|
||||
ref={(el) => (subSectionRefs.current[subSection.id] = el)}
|
||||
id={subSection.id} // This creates the anchor for hash navigation
|
||||
className="scroll-mt-6"
|
||||
>
|
||||
{renderSubSectionContent(subSection.id)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ id: "userProfile", label: "User Profile", type: "settings" },
|
||||
{ id: "create and invite", label: "Create and invite", type: "settings" },
|
||||
{ id: "language", label: "Language", type: "settings" },
|
||||
{ id: "contactAll", label: "All Contacts", type: "contact" },
|
||||
{ id: "contactAdd", label: "Add Contact", type: "contact" },
|
||||
{ id: "contactRemove", label: "Remove Contact", type: "contact" },
|
||||
{ id: "contactShare", label: "Share Contact", type: "contact" },
|
||||
];
|
||||
|
||||
|
||||
// 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);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Re-fetch dashboard data when activeAccountId changes
|
||||
useEffect(() => {
|
||||
const rawUser = JSON.parse(sessionStorage.getItem('userDetails') || 'null');
|
||||
|
||||
if (rawUser) {
|
||||
const userData: UserData = {
|
||||
id: String(rawUser.id || ''),
|
||||
name: rawUser.name || '',
|
||||
email: rawUser.email || '',
|
||||
language: rawUser.language || '',
|
||||
account: {
|
||||
id: rawUser.account?.id || 0,
|
||||
isDefault: rawUser.account?.isDefault || false,
|
||||
name: rawUser.account?.name || '',
|
||||
},
|
||||
};
|
||||
|
||||
setUser(userData);
|
||||
}
|
||||
}, [activeAccountId]);
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch account list when component mounts
|
||||
getAccountList()
|
||||
}, [])
|
||||
|
||||
// Set initial subsection when component mounts or activeTab changes
|
||||
useEffect(() => {
|
||||
const subSections = getSubSections(activeTab);
|
||||
console.log("subSections", subSections)
|
||||
const hash = location.hash.replace('#', '');
|
||||
|
||||
if (subSections.length > 0) {
|
||||
// If there's a hash and it's valid for current tab, use it
|
||||
if (hash && subSections.find(s => s.id === hash)) {
|
||||
setActiveSubSection(hash);
|
||||
}
|
||||
// If no valid hash or no current activeSubSection, use first subsection
|
||||
else if (!activeSubSection || !subSections.find(s => s.id === activeSubSection)) {
|
||||
const firstSubSectionId = subSections[0].id;
|
||||
setActiveSubSection(firstSubSectionId);
|
||||
// Update URL hash if no hash exists
|
||||
if (!hash) {
|
||||
navigate(`${location.pathname}#${firstSubSectionId}`, { replace: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [activeTab]);
|
||||
|
||||
// Auto-scroll to subsection when activeSubSection changes
|
||||
useEffect(() => {
|
||||
if (activeSubSection) {
|
||||
setTimeout(() => {
|
||||
scrollToSubSection(activeSubSection);
|
||||
}, 100);
|
||||
}
|
||||
}, [activeSubSection]);
|
||||
|
||||
const handleSubmit = async (data: FormDataType, action: ActionType) => {
|
||||
setCreateAndInviteLoader(true)
|
||||
try {
|
||||
let res;
|
||||
let toastMesaage;
|
||||
if (action === 'create') {
|
||||
console.log('Creating account:', data);
|
||||
const payloadAccount = {
|
||||
name: data.accountName
|
||||
}
|
||||
res = await api.post(`/api/user/accounts`, payloadAccount)
|
||||
console.log("resAccountName", res)
|
||||
if (res.status === 201) {
|
||||
toastMesaage = `${action.toUpperCase()} Created Successfull...!`
|
||||
}
|
||||
} else if (action === 'invite') {
|
||||
console.log('Inviting user:', data);
|
||||
const payloadInvite = {
|
||||
email: data.email,
|
||||
role: data.role
|
||||
}
|
||||
res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
|
||||
console.log("InviteNAme", res)
|
||||
toastMesaage = "Invite Successfull...!"
|
||||
}
|
||||
|
||||
if (res?.data) {
|
||||
toast.success(toastMesaage, {
|
||||
position: "top-center",
|
||||
autoClose: 1500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
|
||||
// Refetch account list after successful submission
|
||||
await getAccountList();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Submission error:', err);
|
||||
} finally {
|
||||
setCreateAndInviteLoader(false)
|
||||
}
|
||||
};
|
||||
const [activeTab, setActiveTab] = useState("userProfile");
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* <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">
|
||||
<SettingNav />
|
||||
|
||||
<div className="min-h-screen bg-[#f9fafa]">
|
||||
{/* Top Nav Tabs */}
|
||||
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-4">
|
||||
<div className="flex 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
|
||||
? "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"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
{tabs.map((tab) => (
|
||||
tab.type === page1 && <button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
|
||||
${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"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</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">
|
||||
<div className="sticky top-6 z-20">
|
||||
<AsideSection
|
||||
activeSubSection={activeSubSection}
|
||||
onSubSectionClick={handleSubSectionClick}
|
||||
subSections={getSubSections(activeTab)}
|
||||
mainTabTitle={tabs.find(t => t.id === activeTab)?.label || ""}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
{/* Scrollable Main Content */}
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
className="flex-1 min-w-0 overflow-y-auto no-scrollbar"
|
||||
>
|
||||
{renderContent()}
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Content Area */}
|
||||
<div className="px-8 py-6">{renderContent()}</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,11 @@ const SettingNav = () => {
|
|||
</button>
|
||||
|
||||
<Link
|
||||
to="/s/settings"
|
||||
to="/settings"
|
||||
aria-label="Settings"
|
||||
className="p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-600"
|
||||
>
|
||||
<FaCog className="text-sm" />
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,540 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { AiOutlineUpload, AiOutlineEdit } from 'react-icons/ai';
|
||||
import { MdCloudUpload } from 'react-icons/md';
|
||||
import api from '../../../config/api';
|
||||
import DrawSignatureCanvas from './DrawSignatureCanvas';
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
email: string;
|
||||
signatureType: string;
|
||||
lastName: string;
|
||||
firstName: string
|
||||
font: string;
|
||||
initialsBlob: string;
|
||||
initialsStampedBlob: string;
|
||||
initialsHash: string;
|
||||
signatureHash: string;
|
||||
signatureBlob: string;
|
||||
signatureStampedBlob: string;
|
||||
default: boolean
|
||||
}
|
||||
|
||||
interface AddSignatureModalProps {
|
||||
setShowAddSignature?: (value: boolean) => void;
|
||||
getAllSignatures: () => Promise<void>;
|
||||
editingSignature?: Signature | null;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface SelectStyle {
|
||||
id: number,
|
||||
style: string
|
||||
}
|
||||
|
||||
const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||
setShowAddSignature,
|
||||
getAllSignatures,
|
||||
editingSignature
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' | 'SELECT'>('TYPE');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
const [signatures, setSignatures] = useState<{
|
||||
fullSignature: string | null;
|
||||
initials: string | null;
|
||||
}>({ fullSignature: null, initials: 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 [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
||||
// Store the preview URL
|
||||
const [preview1, setPreview1] = useState<string | null>(null);
|
||||
const [preview2, setPreview2] = useState<string | null>(null);
|
||||
|
||||
// User data
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
language: "",
|
||||
account: {
|
||||
id: 0,
|
||||
isDefault: false,
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
const isEditMode = !!editingSignature;
|
||||
|
||||
// Navigation items
|
||||
const navigationItems = [
|
||||
{ id: 'TYPE', label: 'TYPE', 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" /> },
|
||||
];
|
||||
|
||||
// Initialize form with editing signature data
|
||||
useEffect(() => {
|
||||
if (editingSignature) {
|
||||
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
|
||||
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
|
||||
setActiveTab(editingSignature.signatureType as 'TYPE' | 'DRAW' | 'UPLOAD');
|
||||
|
||||
// Set font for SELECT tab
|
||||
const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
|
||||
if (fontOption) {
|
||||
setSelectedSignature({ id: fontOption.id, style: fontOption.style });
|
||||
}
|
||||
|
||||
// Set signature blobs for all tabs
|
||||
if (editingSignature.signatureBlob && editingSignature.initialsBlob) {
|
||||
setSignatures({
|
||||
fullSignature: `data:image/png;base64,${editingSignature.signatureBlob}`,
|
||||
initials: `data:image/png;base64,${editingSignature.initialsBlob}`
|
||||
});
|
||||
|
||||
// Set preview URLs for UPLOAD tab
|
||||
if (editingSignature.signatureType === 'UPLOAD') {
|
||||
setPreview1(`data:image/png;base64,${editingSignature.signatureBlob}`);
|
||||
setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [editingSignature]);
|
||||
|
||||
const handleSignatureChange = (data: { fullSignature: string | null; initials: string | null }) => {
|
||||
setSignatures(data);
|
||||
};
|
||||
|
||||
// Cleanup preview URLs when component unmounts or image changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (preview1) URL.revokeObjectURL(preview1);
|
||||
if (preview2) URL.revokeObjectURL(preview2);
|
||||
};
|
||||
}, [preview1, preview2]);
|
||||
|
||||
const handleImageChange = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
setFile: React.Dispatch<React.SetStateAction<File | null>>,
|
||||
setPreview: React.Dispatch<React.SetStateAction<string | null>>,
|
||||
type: "fullSignature" | "initials"
|
||||
) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setFile(file);
|
||||
const previewUrl = URL.createObjectURL(file);
|
||||
setPreview(previewUrl);
|
||||
|
||||
// Convert to base64
|
||||
const base64 = await convertToBase64(file);
|
||||
|
||||
// Update the appropriate signature
|
||||
setSignatures((prev) => ({
|
||||
...prev,
|
||||
[type]: base64,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const convertToBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
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
|
||||
};
|
||||
|
||||
let res;
|
||||
if (isEditMode && editingSignature) {
|
||||
// Update existing signature
|
||||
const updatePayload = {
|
||||
...payload,
|
||||
signatureId: editingSignature.id
|
||||
};
|
||||
res = await api.put(`/api/user/signatures`, updatePayload);
|
||||
console.log("handleUpdate", res);
|
||||
|
||||
toast.success("Signature Updated Successfully", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
// Create new signature
|
||||
res = await api.post(`/api/user/signatures`, payload);
|
||||
console.log("handleSubmit", res);
|
||||
|
||||
toast.success("Signature Created Successfully", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
|
||||
if (res?.data) {
|
||||
await getAllSignatures();
|
||||
setShowAddSignature?.(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting signature:", error);
|
||||
toast.error(isEditMode ? "Failed to update signature" : "Failed to create signature", {
|
||||
position: "top-center",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case 'TYPE':
|
||||
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>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-4">
|
||||
{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">
|
||||
<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"
|
||||
/>
|
||||
<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' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
'font-sans'
|
||||
}`}>
|
||||
{fullName || option.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-2">
|
||||
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' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
'font-sans'
|
||||
}`}>
|
||||
{initials || option.initials}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'DRAW':
|
||||
return (
|
||||
<DrawSignatureCanvas
|
||||
onSignatureChange={handleSignatureChange}
|
||||
initialSignatures={isEditMode ? signatures : undefined}
|
||||
/>
|
||||
);
|
||||
|
||||
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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</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;
|
||||
}
|
||||
};
|
||||
|
||||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
let currUser = res?.data;
|
||||
setUser(currUser);
|
||||
|
||||
// Only set default values if not in edit mode
|
||||
if (!isEditMode) {
|
||||
setFullName(currUser.firstName + " " + currUser.lastName);
|
||||
setInitials(currUser.firstName.slice(0, 1) + currUser.lastName.slice(0, 1));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getUserDetails();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Inputs */}
|
||||
<div className="px-6 py-2.5 border-b border-gray-200">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Initials
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation Menu */}
|
||||
<div className="flex-1 px-6 py-2.5">
|
||||
<nav className="space-y-2">
|
||||
{navigationItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'TYPE' | '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'
|
||||
: '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>
|
||||
|
||||
</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>
|
||||
|
||||
{/* Footer Buttons in Main Area */}
|
||||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<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"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin" />
|
||||
{isEditMode ? 'UPDATING...' : 'CREATING...'}
|
||||
</>
|
||||
) : (
|
||||
isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddSignatureModal;
|
||||
|
|
@ -1,286 +0,0 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
|
||||
type Props = {
|
||||
onSignatureChange: (data: { fullSignature: string | null; initials: string | null }) => void;
|
||||
initialSignatures?: { fullSignature: string | null; initials: string | null };
|
||||
};
|
||||
|
||||
const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignatures }) => {
|
||||
const canvasRef1 = useRef<HTMLCanvasElement>(null);
|
||||
const canvasRef2 = useRef<HTMLCanvasElement>(null);
|
||||
const [isDrawing, setIsDrawing] = useState(false);
|
||||
const [paths1, setPaths1] = useState<Array<Array<{ x: number; y: number }>>>([]);
|
||||
const [paths2, setPaths2] = useState<Array<Array<{ x: number; y: number }>>>([]);
|
||||
const [currentPath, setCurrentPath] = useState<Array<{ x: number; y: number }>>([]);
|
||||
const [activeCanvas, setActiveCanvas] = useState<'full' | 'initials' | null>(null);
|
||||
const [initialLoaded, setInitialLoaded] = useState(false);
|
||||
|
||||
// Store initial signature images to avoid reloading
|
||||
const [initialImage1, setInitialImage1] = useState<HTMLImageElement | null>(null);
|
||||
const [initialImage2, setInitialImage2] = useState<HTMLImageElement | null>(null);
|
||||
|
||||
// Setup canvas dimensions when component mounts
|
||||
useEffect(() => {
|
||||
const setupCanvas = () => {
|
||||
if (canvasRef1.current) {
|
||||
const rect1 = canvasRef1.current.getBoundingClientRect();
|
||||
canvasRef1.current.width = rect1.width;
|
||||
canvasRef1.current.height = rect1.height;
|
||||
}
|
||||
if (canvasRef2.current) {
|
||||
const rect2 = canvasRef2.current.getBoundingClientRect();
|
||||
canvasRef2.current.width = rect2.width;
|
||||
canvasRef2.current.height = rect2.height;
|
||||
}
|
||||
};
|
||||
|
||||
setupCanvas();
|
||||
|
||||
// Load initial signatures after canvas setup
|
||||
if (initialSignatures && !initialLoaded) {
|
||||
setTimeout(() => {
|
||||
loadInitialSignatures();
|
||||
}, 100);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadInitialSignatures = () => {
|
||||
if (!initialSignatures) return;
|
||||
|
||||
let loadedCount = 0;
|
||||
const totalToLoad = (initialSignatures.fullSignature ? 1 : 0) + (initialSignatures.initials ? 1 : 0);
|
||||
|
||||
const checkComplete = () => {
|
||||
loadedCount++;
|
||||
if (loadedCount === totalToLoad) {
|
||||
setInitialLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
// Load full signature
|
||||
if (initialSignatures.fullSignature && canvasRef1.current) {
|
||||
const img1 = new Image();
|
||||
img1.onload = () => {
|
||||
setInitialImage1(img1);
|
||||
const ctx1 = canvasRef1.current?.getContext('2d');
|
||||
if (ctx1) {
|
||||
ctx1.clearRect(0, 0, canvasRef1.current!.width, canvasRef1.current!.height);
|
||||
ctx1.drawImage(img1, 0, 0);
|
||||
}
|
||||
checkComplete();
|
||||
};
|
||||
img1.src = initialSignatures.fullSignature;
|
||||
}
|
||||
|
||||
// Load initials
|
||||
if (initialSignatures.initials && canvasRef2.current) {
|
||||
const img2 = new Image();
|
||||
img2.onload = () => {
|
||||
setInitialImage2(img2);
|
||||
const ctx2 = canvasRef2.current?.getContext('2d');
|
||||
if (ctx2) {
|
||||
ctx2.clearRect(0, 0, canvasRef2.current!.width, canvasRef2.current!.height);
|
||||
ctx2.drawImage(img2, 0, 0);
|
||||
}
|
||||
checkComplete();
|
||||
};
|
||||
img2.src = initialSignatures.initials;
|
||||
}
|
||||
|
||||
if (totalToLoad === 0) {
|
||||
setInitialLoaded(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
setIsDrawing(true);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
||||
setCurrentPath([point]);
|
||||
setActiveCanvas(e.currentTarget === canvasRef1.current ? 'full' : 'initials');
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
|
||||
if (!isDrawing) return;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const point = { x: e.clientX - rect.left, y: e.clientY - rect.top };
|
||||
const newPath = [...currentPath, point];
|
||||
setCurrentPath(newPath);
|
||||
|
||||
// Draw immediately for smooth experience
|
||||
drawCurrentPath(e.currentTarget as HTMLCanvasElement, newPath);
|
||||
};
|
||||
|
||||
const drawCurrentPath = (canvas: HTMLCanvasElement, path: Array<{ x: number; y: number }>) => {
|
||||
if (!canvas || path.length < 2) return;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Only draw the current path segment without clearing the canvas
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
const lastPoint = path[path.length - 2];
|
||||
const currentPoint = path[path.length - 1];
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastPoint.x, lastPoint.y);
|
||||
ctx.lineTo(currentPoint.x, currentPoint.y);
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
const exportCanvasAsImage = (canvas: HTMLCanvasElement | null): string | null => {
|
||||
if (!canvas) return null;
|
||||
return canvas.toDataURL('image/png');
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDrawing(false);
|
||||
if (currentPath.length === 0 || !activeCanvas) return;
|
||||
|
||||
if (activeCanvas === 'full') {
|
||||
const newPaths = [...paths1, currentPath];
|
||||
setPaths1(newPaths);
|
||||
} else {
|
||||
const newPaths = [...paths2, currentPath];
|
||||
setPaths2(newPaths);
|
||||
}
|
||||
|
||||
setCurrentPath([]);
|
||||
|
||||
// Export both canvases and notify parent
|
||||
const fullSignature = exportCanvasAsImage(canvasRef1.current);
|
||||
const initials = exportCanvasAsImage(canvasRef2.current);
|
||||
onSignatureChange({ fullSignature, initials });
|
||||
};
|
||||
|
||||
const redrawCanvas = (canvas: HTMLCanvasElement, paths: Array<Array<{ x: number; y: number }>>, initialImage: HTMLImageElement | null) => {
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Clear canvas
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw initial signature if exists
|
||||
if (initialImage) {
|
||||
ctx.drawImage(initialImage, 0, 0);
|
||||
}
|
||||
|
||||
// Draw all paths
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineJoin = 'round';
|
||||
ctx.lineCap = 'round';
|
||||
|
||||
paths.forEach((path) => {
|
||||
if (path.length < 2) return;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(path[0].x, path[0].y);
|
||||
for (let i = 1; i < path.length; i++) {
|
||||
ctx.lineTo(path[i].x, path[i].y);
|
||||
}
|
||||
ctx.stroke();
|
||||
});
|
||||
};
|
||||
|
||||
const clearCanvas = () => {
|
||||
if (canvasRef1.current) {
|
||||
const ctx1 = canvasRef1.current.getContext('2d');
|
||||
ctx1?.clearRect(0, 0, canvasRef1.current.width, canvasRef1.current.height);
|
||||
}
|
||||
if (canvasRef2.current) {
|
||||
const ctx2 = canvasRef2.current.getContext('2d');
|
||||
ctx2?.clearRect(0, 0, canvasRef2.current.width, canvasRef2.current.height);
|
||||
}
|
||||
|
||||
setPaths1([]);
|
||||
setPaths2([]);
|
||||
setInitialImage1(null);
|
||||
setInitialImage2(null);
|
||||
setInitialLoaded(false);
|
||||
onSignatureChange({ fullSignature: null, initials: null });
|
||||
};
|
||||
|
||||
const undoLastPath = () => {
|
||||
if (activeCanvas === 'full' && paths1.length > 0) {
|
||||
const newPaths = paths1.slice(0, -1);
|
||||
setPaths1(newPaths);
|
||||
redrawCanvas(canvasRef1.current!, newPaths, initialImage1);
|
||||
} else if (activeCanvas === 'initials' && paths2.length > 0) {
|
||||
const newPaths = paths2.slice(0, -1);
|
||||
setPaths2(newPaths);
|
||||
redrawCanvas(canvasRef2.current!, newPaths, initialImage2);
|
||||
}
|
||||
|
||||
// Update parent with new signature data
|
||||
setTimeout(() => {
|
||||
const fullSignature = exportCanvasAsImage(canvasRef1.current);
|
||||
const initials = exportCanvasAsImage(canvasRef2.current);
|
||||
onSignatureChange({ fullSignature, initials });
|
||||
}, 10);
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="grid grid-cols-12 gap-6 mb-2">
|
||||
{/* 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="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"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Initials Canvas */}
|
||||
<div className="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"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
onClick={clearCanvas}
|
||||
>
|
||||
Clear All
|
||||
</button>
|
||||
<button
|
||||
className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
|
||||
onClick={undoLastPath}
|
||||
disabled={!activeCanvas || (activeCanvas === 'full' ? paths1.length === 0 : paths2.length === 0)}
|
||||
>
|
||||
Undo Last
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DrawSignatureCanvas;
|
||||
|
|
@ -1,266 +0,0 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { FiEdit3, FiTrash2, FiPlus, FiMoreVertical } from 'react-icons/fi';
|
||||
import AddSignatureModal from './AddSignatureModal';
|
||||
import api from '../../../config/api';
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import { FaSpinner } from 'react-icons/fa';
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
email: string;
|
||||
signatureType: string;
|
||||
lastName: string;
|
||||
firstName: string
|
||||
font: string;
|
||||
initialsBlob: string;
|
||||
initialsStampedBlob: string;
|
||||
initialsHash: string;
|
||||
signatureHash: string;
|
||||
signatureBlob: string;
|
||||
signatureStampedBlob: string;
|
||||
default: boolean;
|
||||
signatureMimeType:string;
|
||||
initialsMimeType:string
|
||||
}
|
||||
|
||||
const SignatureManager: React.FC = () => {
|
||||
const [loading, setLoading] = useState<boolean>(false)
|
||||
const [signatures, setSignatures] = useState<Signature[]>([]);
|
||||
const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
|
||||
const [showAddSignature, setShowAddSignature] = useState<boolean>(false);
|
||||
const [editingSignature, setEditingSignature] = useState<Signature | null>(null);
|
||||
|
||||
const getAllSignatures = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
let res = await api.get("/api/user/signatures")
|
||||
console.log("getAllSignatures", res.data)
|
||||
let signatureData = res?.data
|
||||
setSignatures(signatureData)
|
||||
} catch (error) {
|
||||
console.log("getAllSignatures", error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllSignatures()
|
||||
}, [])
|
||||
|
||||
const handleEdit = (id: string) => {
|
||||
console.log('Edit signature:', id);
|
||||
let editSignature = signatures.find((item) => item.id === id);
|
||||
console.log("editSignature", editSignature);
|
||||
|
||||
if (editSignature) {
|
||||
setEditingSignature(editSignature);
|
||||
setShowAddSignature(true);
|
||||
}
|
||||
setActiveDropdown(null);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!id) return;
|
||||
setLoading(true)
|
||||
try {
|
||||
let res = await api.delete(`/api/user/signatures/${id}`)
|
||||
console.log(res.data)
|
||||
toast.success("Signature Delete Successfull", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
await getAllSignatures();
|
||||
} catch (error) {
|
||||
console.log("delete signature", error)
|
||||
} finally {
|
||||
setActiveDropdown(null);
|
||||
setLoading(false)
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDropdown = (id: string) => {
|
||||
setActiveDropdown(activeDropdown === id ? null : id);
|
||||
};
|
||||
|
||||
const handleAddNew = () => {
|
||||
setEditingSignature(null);
|
||||
setShowAddSignature(true);
|
||||
};
|
||||
|
||||
const handleModalClose = () => {
|
||||
setShowAddSignature(false);
|
||||
setEditingSignature(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading ? <div className=' flex items-center justify-center'>
|
||||
<div className="p-12 text-center mt-8">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<FaSpinner className="w-20 h-20 mx-auto animate-spin" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">Loading...</h3>
|
||||
</div>
|
||||
</div> :
|
||||
<div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6">
|
||||
<div className="max-w-[84vw] mx-auto">
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1>
|
||||
<p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
|
||||
</div>
|
||||
<button className="bg-[var(--modalSubmitBG)] hover:bg-[var(--modalSubmitBGHover)] text-white px-4 py-2 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
|
||||
<FiPlus className="" />
|
||||
ADD
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table Card */}
|
||||
<div className="bg-white rounded-md shadow-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>
|
||||
</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 shadow-xl 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>
|
||||
|
||||
{/* Empty State (if no signatures) */}
|
||||
{signatures.length === 0 && (
|
||||
<div className="bg-white rounded-xl shadow-lg p-12 text-center mt-8">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<FiEdit3 className="w-16 h-16 mx-auto" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-700 mb-2">No signatures yet</h3>
|
||||
<p className="text-gray-500 mb-6">Create your first signature to get started.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
|
||||
{/* Click outside to close dropdown */}
|
||||
{activeDropdown && (
|
||||
<div
|
||||
className="fixed inset-0 z-0"
|
||||
onClick={() => setActiveDropdown(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{showAddSignature && (
|
||||
<AddSignatureModal
|
||||
setShowAddSignature={handleModalClose}
|
||||
getAllSignatures={getAllSignatures}
|
||||
editingSignature={editingSignature}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignatureManager;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import { FiX, FiEdit2 } from 'react-icons/fi';
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
name:string
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
|
||||
interface UserProfileProps {
|
||||
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-green-800 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>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default UserProfile
|
||||
|
|
@ -1,549 +1,107 @@
|
|||
// import React from 'react'
|
||||
// import { SaveType } from '../client/SignDocument';
|
||||
|
||||
// interface SignConProps {
|
||||
// setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
// recipientId: string;
|
||||
// saved: SaveType;
|
||||
// setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
|
||||
// // save: () => void;
|
||||
// }
|
||||
|
||||
// const SignCon: React.FC<SignConProps> = ({ setOpenSign, recipientId, saved, setSaved }) => {
|
||||
// return (
|
||||
// <div>SignCon</div>
|
||||
// )
|
||||
// }
|
||||
|
||||
// export default SignCon
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
// import api from '../../config/api';
|
||||
import DrawSignatureCanvas from '../setting/Signature/DrawSignatureCanvas';
|
||||
import { AiOutlineUpload, AiOutlineEdit } from 'react-icons/ai';
|
||||
import { MdCloudUpload } from 'react-icons/md';
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import { GrCheckboxSelected } from "react-icons/gr";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import Draw from './Draw'
|
||||
import TypedSign from './TypedSign';
|
||||
import SignUpload from './SignUpload';
|
||||
import { IoMdClose } from 'react-icons/io';
|
||||
import axios from 'axios';
|
||||
import { store } from '../../store/store';
|
||||
import { SaveType, SaveTypeEnum } from '../client/SignDocument';
|
||||
|
||||
interface Signature {
|
||||
id: string;
|
||||
email: string;
|
||||
signatureType: string;
|
||||
lastName: string;
|
||||
firstName: string
|
||||
font: string;
|
||||
initialsBlob: string;
|
||||
initialsStampedBlob: string;
|
||||
initialsHash: string;
|
||||
signatureHash: string;
|
||||
signatureBlob: string;
|
||||
signatureStampedBlob: string;
|
||||
default: boolean
|
||||
interface SignConProps {
|
||||
setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
recipientId: string;
|
||||
saved: SaveType;
|
||||
setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
|
||||
// save: () => void;
|
||||
}
|
||||
|
||||
interface AddSignatureModalProps {
|
||||
setShowAddSignature?: (value: boolean) => void;
|
||||
getAllSignatures: () => Promise<void>;
|
||||
editingSignature?: Signature | null;
|
||||
}
|
||||
const SignCon: React.FC<SignConProps> = ({ setOpenSign, recipientId, saved, setSaved }) => {
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
isDefault: boolean;
|
||||
name: string;
|
||||
}
|
||||
const [activeSaveType, setActiveSaveType] = React.useState<SaveTypeEnum>(SaveTypeEnum.DRAW);
|
||||
|
||||
interface UserData {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
language: string;
|
||||
account: Account;
|
||||
}
|
||||
const handleSaveSignature = () => {
|
||||
if (!saved.save) return
|
||||
|
||||
interface SelectStyle {
|
||||
id: number,
|
||||
style: string
|
||||
}
|
||||
|
||||
const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
||||
setShowAddSignature,
|
||||
getAllSignatures,
|
||||
editingSignature
|
||||
}) => {
|
||||
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
|
||||
const [fullName, setFullName] = useState('');
|
||||
const [initials, setInitials] = useState('');
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
const [signatures, setSignatures] = useState<{
|
||||
fullSignature: string | null;
|
||||
initials: string | null;
|
||||
}>({ fullSignature: null, initials: 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 [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
|
||||
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
|
||||
);
|
||||
|
||||
// Store the actual file
|
||||
const [file1, setFile1] = useState<File | null>(null);
|
||||
const [file2, setFile2] = useState<File | null>(null);
|
||||
|
||||
// Store the preview URL
|
||||
const [preview1, setPreview1] = useState<string | null>(null);
|
||||
const [preview2, setPreview2] = useState<string | null>(null);
|
||||
|
||||
// User data
|
||||
const [user, setUser] = useState<UserData>({
|
||||
id: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
language: "",
|
||||
account: {
|
||||
id: 0,
|
||||
isDefault: false,
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
const isEditMode = !!editingSignature;
|
||||
|
||||
// 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" /> },
|
||||
];
|
||||
|
||||
// Initialize form with editing signature data
|
||||
useEffect(() => {
|
||||
if (editingSignature) {
|
||||
setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
|
||||
setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
|
||||
setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
|
||||
|
||||
// Set font for SELECT tab
|
||||
const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
|
||||
if (fontOption) {
|
||||
setSelectedSignature({ id: fontOption.id, style: fontOption.style });
|
||||
}
|
||||
|
||||
// Set signature blobs for all tabs
|
||||
if (editingSignature.signatureBlob && editingSignature.initialsBlob) {
|
||||
setSignatures({
|
||||
fullSignature: `data:image/png;base64,${editingSignature.signatureBlob}`,
|
||||
initials: `data:image/png;base64,${editingSignature.initialsBlob}`
|
||||
});
|
||||
|
||||
// Set preview URLs for UPLOAD tab
|
||||
if (editingSignature.signatureType === 'UPLOAD') {
|
||||
setPreview1(`data:image/png;base64,${editingSignature.signatureBlob}`);
|
||||
setPreview2(`data:image/png;base64,${editingSignature.initialsBlob}`);
|
||||
console.log("signature:", saved.initial, "initials:", saved.signature, "subType:", saved.saveType, "MIC CHECK")
|
||||
// return
|
||||
|
||||
axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/signature?recipientId=${recipientId}`,
|
||||
{
|
||||
signature: saved.signature,
|
||||
initials: saved.initial,
|
||||
subType: saved.saveType
|
||||
},
|
||||
{ headers: { "ngrok-skip-browser-warning": "69420", } })
|
||||
.then((res) => {
|
||||
console.log(res, "Signature saved response")
|
||||
if (res.status === 200 || res.status === 201) {
|
||||
setOpenSign(false)
|
||||
setActiveSaveType(saved.saveType as SaveTypeEnum)
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [editingSignature]);
|
||||
|
||||
const handleSignatureChange = (data: { fullSignature: string | null; initials: string | null }) => {
|
||||
setSignatures(data);
|
||||
};
|
||||
|
||||
// Cleanup preview URLs when component unmounts or image changes
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (preview1) URL.revokeObjectURL(preview1);
|
||||
if (preview2) URL.revokeObjectURL(preview2);
|
||||
};
|
||||
}, [preview1, preview2]);
|
||||
|
||||
const handleImageChange = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
setFile: React.Dispatch<React.SetStateAction<File | null>>,
|
||||
setPreview: React.Dispatch<React.SetStateAction<string | null>>,
|
||||
type: "fullSignature" | "initials"
|
||||
) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
setFile(file);
|
||||
const previewUrl = URL.createObjectURL(file);
|
||||
setPreview(previewUrl);
|
||||
|
||||
// Convert to base64
|
||||
const base64 = await convertToBase64(file);
|
||||
|
||||
// Update the appropriate signature
|
||||
setSignatures((prev) => ({
|
||||
...prev,
|
||||
[type]: base64,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const convertToBase64 = (file: File): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (!signatures.fullSignature || !signatures.initials) {
|
||||
alert('Please provide both signature and initials');
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
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
|
||||
};
|
||||
|
||||
let res;
|
||||
if (isEditMode && editingSignature) {
|
||||
// Update existing signature
|
||||
const updatePayload = {
|
||||
...payload,
|
||||
signatureId: editingSignature.id
|
||||
};
|
||||
res = await axios.put(`${import.meta.env.VITE_BASE_URI}/api/user/signatures`, updatePayload);
|
||||
console.log("handleUpdate", res);
|
||||
|
||||
toast.success("Signature Updated Successfully", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
} else {
|
||||
// Create new signature
|
||||
res = await api.post(`/api/user/signatures`, payload);
|
||||
console.log("handleSubmit", res);
|
||||
|
||||
toast.success("Signature Created Successfully", {
|
||||
position: "top-center",
|
||||
autoClose: 500,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
|
||||
if (res?.data) {
|
||||
await getAllSignatures();
|
||||
setShowAddSignature?.(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting signature:", error);
|
||||
toast.error(isEditMode ? "Failed to update signature" : "Failed to create signature", {
|
||||
position: "top-center",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-4">
|
||||
{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">
|
||||
<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"
|
||||
/>
|
||||
<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' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
'font-sans'
|
||||
}`}>
|
||||
{fullName || option.name}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-2">
|
||||
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' :
|
||||
option.style === 'script' ? 'font-mono' :
|
||||
option.style === 'elegant' ? 'font-serif' :
|
||||
option.style === 'modern' ? 'font-sans tracking-wide' :
|
||||
'font-sans'
|
||||
}`}>
|
||||
{initials || option.initials}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'DRAW':
|
||||
return (
|
||||
<DrawSignatureCanvas
|
||||
onSignatureChange={handleSignatureChange}
|
||||
initialSignatures={isEditMode ? signatures : undefined}
|
||||
/>
|
||||
);
|
||||
|
||||
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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const getUserDetails = async () => {
|
||||
try {
|
||||
let res = await api.get(`/api/user/details`);
|
||||
console.log("getuser", res);
|
||||
let currUser = res?.data;
|
||||
setUser(currUser);
|
||||
|
||||
// Only set default values if not in edit mode
|
||||
if (!isEditMode) {
|
||||
setFullName(currUser.firstName + " " + currUser.lastName);
|
||||
setInitials(currUser.firstName.slice(0, 1) + currUser.lastName.slice(0, 1));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching user details:", error);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Error saving signature:', err);
|
||||
})
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getUserDetails();
|
||||
}, []);
|
||||
handleSaveSignature();
|
||||
}, [saved])
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 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">
|
||||
<div className='absolute top-0 left-0 w-full h-full flex items-center justify-center '>
|
||||
<div className='absolute top-0 left-0 w-full h-full bg-slate-100 opacity-60'></div>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
<div className='relative lg:min-w-[650px] max-w-max mx-auto shadow-md rounded-sm bg-white pt-3 pb-1 px-3'>
|
||||
<IoMdClose
|
||||
onClick={() => setOpenSign(false)}
|
||||
className='absolute right-3 text-slate-400 text-lg hover:text-[var(--primary)] cursor-pointer transition-all' />
|
||||
{/* Signature Save types Nav */}
|
||||
<div className='flex text-sm'>
|
||||
<div className={`px-4 pb-1 cursor-pointer border-b-2 font-medium ${activeSaveType === SaveTypeEnum.DRAW ? "border-[var(--primary)] text-[var(--primary)]" : "border-slate-100"}`}
|
||||
onClick={() => setActiveSaveType(SaveTypeEnum.DRAW)}>
|
||||
<p className='tracking-wide'>Draw</p>
|
||||
</div>
|
||||
|
||||
{/* Form Inputs */}
|
||||
<div className="px-6 py-2.5 border-b border-gray-200">
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Initials
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`px-4 pb-1 cursor-pointer border-b-2 font-medium ${activeSaveType === SaveTypeEnum.TYPE ? "border-[var(--primary)] text-[var(--primary)]" : "border-slate-100"}`}
|
||||
onClick={() => setActiveSaveType(SaveTypeEnum.TYPE)}>
|
||||
<p className='tracking-wide'>Type</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation Menu */}
|
||||
<div className="flex-1 px-6 py-2.5">
|
||||
<nav className="space-y-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'
|
||||
: '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 className={`px-4 pb-1 cursor-pointer border-b-2 font-medium ${activeSaveType === SaveTypeEnum.UPLOAD ? "border-[var(--primary)] text-[var(--primary)]" : "border-slate-100"}`}
|
||||
onClick={() => setActiveSaveType(SaveTypeEnum.UPLOAD)}>
|
||||
<p className='tracking-wide'>Upload</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex flex-col ">
|
||||
{/* Header with close button */}
|
||||
{activeSaveType === SaveTypeEnum.DRAW && <Draw
|
||||
saved={saved}
|
||||
setSaved={setSaved}
|
||||
/>}
|
||||
{activeSaveType === SaveTypeEnum.TYPE && <TypedSign
|
||||
saved={saved}
|
||||
setSaved={setSaved}
|
||||
/>}
|
||||
{activeSaveType === SaveTypeEnum.UPLOAD && <SignUpload
|
||||
saved={saved}
|
||||
setSaved={setSaved}
|
||||
/>}
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* Footer Buttons in Main Area */}
|
||||
<div className="p-4 border-t border-gray-200 flex justify-end gap-3">
|
||||
<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"
|
||||
onClick={() => setShowAddSignature?.(false)}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<FaSpinner className="animate-spin" />
|
||||
{isEditMode ? 'UPDATING...' : 'CREATING...'}
|
||||
</>
|
||||
) : (
|
||||
isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* <div className="mt-3 flex justify-end gap-2">
|
||||
<button
|
||||
// onClick={close}
|
||||
className="border-1 border-[var(--primary)] text-[var(--primary)] px-4 text-sm py-1 rounded shadow opacity-70 hover:opacity-100 transition-all cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
// onClick={save}
|
||||
className="bg-[var(--primary)] opacity-90 hover:opacity-100 text-white px-4 text-sm py-1 rounded shadow disabled:opacity-50 transition-all cursor-pointer"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default AddSignatureModal;
|
||||
export default SignCon;
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
import api from "../../config/api";
|
||||
import { IoMdAdd } from "react-icons/io";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const Templates = () => {
|
||||
const [activeFilter, setActiveFilter] = useState("All");
|
||||
|
||||
const accountDetails = useSelector((state: any) => state.user.account);
|
||||
const accountId = accountDetails.id || "";
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const filters = ["All", "My Templates", "Shared"];
|
||||
|
||||
const handleAddTemplate = async () => {
|
||||
console.log("handleAddTemplate called");
|
||||
const res = await api.post(`/api/accounts/${accountId}/templates`);
|
||||
|
||||
navigate(`/process-step-one/${accountId}/template/${res.data}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-3 text-sm">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
{/* Filter as pill buttons */}
|
||||
<div className="flex gap-2">
|
||||
{filters.map((filter) => (
|
||||
<button
|
||||
key={filter}
|
||||
onClick={() => setActiveFilter(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"
|
||||
}`}
|
||||
>
|
||||
{filter}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
onClick={handleAddTemplate}
|
||||
className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
|
||||
<IoMdAdd className="text-white" />
|
||||
<button
|
||||
className="text-white rounded text-sm hover:opacity-90">
|
||||
Add Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full border border-gray-200 bg-white shadow rounded">
|
||||
<thead className="bg-gray-100 text-xs text-gray-700 uppercase tracking-wider">
|
||||
<tr>
|
||||
<th className="px-4 py-2 w-10"></th>
|
||||
<th className="px-4 py-2 text-left">Name</th>
|
||||
<th className="px-4 py-2 text-center">Owner</th>
|
||||
<th className="px-4 py-2 text-center">Created</th>
|
||||
<th className="px-4 py-2 text-center">Last Updated</th>
|
||||
<th className="px-4 py-2 text-center"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
<tr className="hover:bg-gray-50">
|
||||
<td className="px-4 py-2">
|
||||
<div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
|
||||
{/* <FaCheck className="text-purple-600 text-xs" /> */}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-sm">Test Template</td>
|
||||
<td className="px-4 py-2 text-center text-sm">User 1</td>
|
||||
<td className="px-4 py-2 text-center text-sm">2025-07-14</td>
|
||||
<td className="px-4 py-2 text-center text-sm">Just now</td>
|
||||
<td className="px-4 py-2 text-center relative">
|
||||
<button
|
||||
className="text-slate-400 hover:text-black"
|
||||
>
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Templates;
|
||||
|
|
@ -1,12 +1,9 @@
|
|||
import { AiFillSignature } from 'react-icons/ai';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { LuGitGraph } from 'react-icons/lu';
|
||||
import AccountNav from '../accounts/AccountNav';
|
||||
import { useEffect, useState } from 'react';
|
||||
import api from '../../config/api';
|
||||
import SigningOrderDiagram from '../../SigningOrderDiagram ';
|
||||
import { IoCloseOutline } from 'react-icons/io5';
|
||||
import { MdEditDocument } from "react-icons/md";
|
||||
|
||||
// Sample recipient data — you can replace this with actual API data later
|
||||
const recipients = [
|
||||
|
|
@ -30,8 +27,6 @@ const recipients = [
|
|||
|
||||
const TransactionView = () => {
|
||||
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
|
||||
console.log("account" , accountId , transactionId)
|
||||
|
||||
|
||||
if (!accountId || !transactionId) {
|
||||
window.location.href = "/";
|
||||
|
|
@ -39,8 +34,6 @@ const TransactionView = () => {
|
|||
}
|
||||
|
||||
const [transactionDetails, setTransactionDetails] = useState(null);
|
||||
const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
|
||||
console.log(transactionDetails, "line 37");
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
|
|
@ -64,14 +57,13 @@ const TransactionView = () => {
|
|||
<div className="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 Forms Made Easy: <span className='text-slate-600'>{transactionDetails.transaction.name ? transactionDetails.transaction.name : "Untitled"}</span>
|
||||
</h1>
|
||||
|
||||
<div className='mt-2'>
|
||||
{/* new Date(transactionDetails?.transaction?.lastModifiedAt * 1000) */}
|
||||
<p className='text-slate-600'>From <span className='text-blue-600'>Shanu.R</span></p>
|
||||
<p className=''><span className='text-slate-600 font-semibold'>Last Change on</span> <span className='text-slate-400'>{new Date(transactionDetails?.transaction?.lastModifiedAt * 1000).toISOString()}</span></p>
|
||||
<p className='text-slate-600'>Created at <span>{new Date(transactionDetails?.transaction?.createdAt * 1000).toISOString()}</span></p>
|
||||
<p className='text-slate-600'>Last Change on <span>12/02/25</span></p>
|
||||
<p className='text-slate-600'>Sent on <span>11/02/25</span></p>
|
||||
</div>
|
||||
|
||||
<p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>Draft</p>
|
||||
|
|
@ -85,23 +77,18 @@ const TransactionView = () => {
|
|||
>
|
||||
Sign
|
||||
</button> */}
|
||||
<button className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold'>
|
||||
<button className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100'>
|
||||
More
|
||||
</button>
|
||||
|
||||
<Link className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}>
|
||||
Edit
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<hr className='my-6 border-slate-200' />
|
||||
|
||||
{/* Recipients Section */}
|
||||
{transactionDetails.recipients.length > 0 &&
|
||||
<div>
|
||||
<div className='flex justify-between items-center text-md'>
|
||||
<h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
|
||||
<p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
|
||||
<p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer'>
|
||||
<LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
|
||||
Signing Graph
|
||||
</p>
|
||||
|
|
@ -135,12 +122,11 @@ const TransactionView = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
<div>
|
||||
<h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
|
||||
<p className='mt-2 text-slate-600'>{ transactionDetails?.transaction?.message ?? "No Message Found...!"}</p>
|
||||
<p className='mt-2 text-slate-600'>No Message Found</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -151,11 +137,7 @@ const TransactionView = () => {
|
|||
<div className='border-3 rounded-sm border-slate-300 relative text-xs'>
|
||||
<img style={{ width: "200px", height: "160px" }} src="https://images.unsplash.com/photo-1746469535771-71a672e8719f?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
|
||||
<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 10</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16}/></Link></span>
|
||||
</p>
|
||||
|
||||
<p className='text-[0.7rem] text-slate-500'>1 of 10</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -164,24 +146,6 @@ const TransactionView = () => {
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{signingOrderModal.open &&
|
||||
<div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center overflow-hidden">
|
||||
<div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full ">
|
||||
<div className="pb-2 text-white flex justify-between items-center bg-[var(--primary)] px-2 py-3 rounded-t-lg">
|
||||
<p className="font-semibold">Signing Order</p>
|
||||
<div
|
||||
onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
|
||||
className="text-xl cursor-pointer hover:text-gray-200 transition-all">
|
||||
<IoCloseOutline />
|
||||
</div>
|
||||
</div>
|
||||
<span className='overflow-y-auto'>
|
||||
<SigningOrderDiagram signers={transactionDetails.recipients} />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ api.interceptors.response.use(
|
|||
async error => {
|
||||
const originalRequest = error.config;
|
||||
// Prevent multiple refresh attempts
|
||||
// if (error.response?.status === 401 || error.response?.status === 500) {
|
||||
if (error.response?.status === 401 || error.response?.status === 500) {
|
||||
originalRequest._retry = true;
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -43,9 +43,6 @@
|
|||
--hideModalBg: #2d2d2d;
|
||||
|
||||
--processStepOneTextHead: #000000;
|
||||
|
||||
--modalSubmitBG:#1919d7;
|
||||
--modalSubmitBGHover:#395ee1;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -77,21 +74,3 @@ canvas {
|
|||
.animate-text {
|
||||
animation: textColorChange 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Loader CSS */
|
||||
|
||||
|
|
@ -1,188 +1,27 @@
|
|||
// import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
// // import { v4 as uuidv4 } from "uuid";
|
||||
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
|
||||
// import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
// import { hideLoader, showLoader } from "./loaderSlice";
|
||||
// // import { showModal } from "./modalSlice";
|
||||
// // import { updateSelectedDocuments } from "./selectedDocsSlice";
|
||||
import { hideLoader, showLoader } from "./loaderSlice";
|
||||
// import { showModal } from "./modalSlice";
|
||||
// import { updateSelectedDocuments } from "./selectedDocsSlice";
|
||||
|
||||
// import api from "../../config/api";
|
||||
// import { Bounce, toast } from "react-toastify";
|
||||
// // import { createAxiosInstance } from "../../config/axiosInstance";
|
||||
import api from "../../config/api";
|
||||
import { Bounce, toast } from "react-toastify";
|
||||
// import { createAxiosInstance } from "../../config/axiosInstance";
|
||||
|
||||
// // const axiosInstance = createAxiosInstance();
|
||||
// const axiosInstance = createAxiosInstance();
|
||||
|
||||
// export interface Document {
|
||||
// id: string;
|
||||
// name: string;
|
||||
// extension: string;
|
||||
// original?: boolean;
|
||||
// corrupted?: boolean;
|
||||
// isCompleted: boolean;
|
||||
// status: string;
|
||||
// }
|
||||
|
||||
// export interface DocumentState {
|
||||
// documents: Document[];
|
||||
// loading: boolean;
|
||||
// error: string | null;
|
||||
// }
|
||||
|
||||
// const initialState: DocumentState = {
|
||||
// documents: [],
|
||||
// loading: false,
|
||||
// error: null,
|
||||
// };
|
||||
|
||||
// interface uploadArgs {
|
||||
// formData: FormData;
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// }
|
||||
|
||||
|
||||
// // Fetch documents from API
|
||||
// export const fetchDocuments = createAsyncThunk<Document[], { accountId: string, transactionId: string }>(
|
||||
// "documents/fetchDocuments",
|
||||
// async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
|
||||
// try {
|
||||
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`);
|
||||
// return response.data as Document[];
|
||||
// } catch (error: any) {
|
||||
// // if(error.status === 401) {}
|
||||
// return rejectWithValue(error.response?.data || "Failed to fetch documents");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// // Upload multiple documents using FormData (Key: "document")
|
||||
// export const uploadDocuments = createAsyncThunk<Document[], uploadArgs>(
|
||||
// "documents/uploadDocuments",
|
||||
// async ({ formData, accountId, transactionId }, { dispatch, rejectWithValue }) => {
|
||||
// try {
|
||||
// dispatch(showLoader("Uploading documents..."));
|
||||
// console.log("Form Data", formData.getAll("document"))
|
||||
|
||||
// const response = await api.post(`/api/accounts/${accountId}/transactions/${transactionId}/documents`, formData, {
|
||||
// headers: {
|
||||
// "Content-Type": "multipart/form-data"
|
||||
// },
|
||||
// });
|
||||
|
||||
// console.log("Form Uploaded Response DocumentSlice Line 185", response.data)
|
||||
|
||||
// dispatch(hideLoader());
|
||||
// return [response.data];
|
||||
// } catch (error: any) {
|
||||
// dispatch(hideLoader());
|
||||
// toast.error("Error Uploading Document", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 3000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: false,
|
||||
// draggable: false,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// transition: Bounce,
|
||||
// });
|
||||
|
||||
// console.log("Failed Uploading Documents")
|
||||
// throw new Error("Failed Uploading Documents")
|
||||
|
||||
// // Mock data in case of failure
|
||||
// // const failedDocuments = formData.getAll("document").map((file: any) => ({
|
||||
// // id: uuidv4(),
|
||||
// // name: file.name,
|
||||
// // extension: file.name.split(".").pop() || "unknown",
|
||||
// // original: Math.random() < 0.5,
|
||||
// // corrupted: Math.random() < 0.5,
|
||||
// // }));
|
||||
|
||||
// // dispatch(updateSelectedDocuments({ documents: failedDocuments }));
|
||||
// // return failedDocuments; // Instead of rejecting, return mock data
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// const documentSlice = createSlice({
|
||||
// name: "documents",
|
||||
// initialState,
|
||||
// reducers: {
|
||||
// setDocuments: (state, action: PayloadAction<Document[]>) => {
|
||||
// state.documents = action.payload;
|
||||
// },
|
||||
// setDocProgComplete: (state, action: PayloadAction<string>) => {
|
||||
// const docIndex = state.documents.findIndex(doc => doc.id === action.payload);
|
||||
// if (docIndex !== -1) {
|
||||
// state.documents[docIndex].isCompleted = true;
|
||||
// }
|
||||
// },
|
||||
// resetDocuments: (state) => {
|
||||
// state.documents = [];
|
||||
// },
|
||||
// deleteDocument: (state, action: PayloadAction<string>) => {
|
||||
// state.documents = state.documents.filter(doc => doc.id !== action.payload);
|
||||
// },
|
||||
// },
|
||||
// extraReducers: (builder) => {
|
||||
// builder
|
||||
// // Fetch documents
|
||||
// .addCase(fetchDocuments.pending, (state) => {
|
||||
// state.loading = true;
|
||||
// state.error = null;
|
||||
// })
|
||||
// .addCase(fetchDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
// state.loading = false;
|
||||
// state.documents = action.payload;
|
||||
// })
|
||||
// .addCase(fetchDocuments.rejected, (state, action) => {
|
||||
// state.loading = false;
|
||||
// state.error = action.payload as string;
|
||||
// })
|
||||
|
||||
// // Upload multiple documents
|
||||
// .addCase(uploadDocuments.pending, (state) => {
|
||||
// state.loading = true;
|
||||
// state.error = null;
|
||||
// })
|
||||
// .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
// state.loading = false;
|
||||
// state.documents = [...action.payload, ...state.documents];
|
||||
// })
|
||||
// .addCase(uploadDocuments.rejected, (state, action) => {
|
||||
// state.loading = false;
|
||||
// state.error = action.payload as string;
|
||||
// });
|
||||
// },
|
||||
// });
|
||||
|
||||
// export const { resetDocuments, setDocuments, setDocProgComplete, deleteDocument } = documentSlice.actions;
|
||||
// export default documentSlice.reducer;
|
||||
|
||||
|
||||
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { toast, Bounce } from 'react-toastify';
|
||||
import api from '../../config/api';
|
||||
import { hideLoader, showLoader } from './loaderSlice';
|
||||
// import { showLoader, hideLoader } from '../loader/loaderSlice';
|
||||
|
||||
// -----------------------
|
||||
// Document Type
|
||||
// -----------------------
|
||||
export interface Document {
|
||||
id?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
type: string;
|
||||
pageCount?: number;
|
||||
[key: string]: any;
|
||||
extension: string;
|
||||
original?: boolean;
|
||||
corrupted?: boolean;
|
||||
isCompleted: boolean;
|
||||
status: string;
|
||||
}
|
||||
|
||||
// -----------------------
|
||||
// Initial State
|
||||
// -----------------------
|
||||
interface DocumentState {
|
||||
export interface DocumentState {
|
||||
documents: Document[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
|
|
@ -194,81 +33,80 @@ const initialState: DocumentState = {
|
|||
error: null,
|
||||
};
|
||||
|
||||
// -----------------------
|
||||
// Thunk: Fetch Documents
|
||||
// -----------------------
|
||||
export const fetchDocuments = createAsyncThunk<
|
||||
Document[],
|
||||
{ accountId: string; transactionId: string }
|
||||
>(
|
||||
'documents/fetchDocuments',
|
||||
async ({ accountId, transactionId }, { rejectWithValue, getState }) => {
|
||||
interface uploadArgs {
|
||||
formData: FormData;
|
||||
accountId: string;
|
||||
transactionId: string;
|
||||
}
|
||||
|
||||
|
||||
// Fetch documents from API
|
||||
export const fetchDocuments = createAsyncThunk<Document[], { accountId: string, transactionId: string }>(
|
||||
"documents/fetchDocuments",
|
||||
async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
|
||||
try {
|
||||
const state = getState() as {
|
||||
selectedRecipients: { transactionTemplateToggle: string };
|
||||
};
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
|
||||
const response = await api.get(
|
||||
`/api/accounts/${accountId}/${toggle}/${transactionId}/documents?include_images=true`
|
||||
);
|
||||
|
||||
const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`);
|
||||
return response.data as Document[];
|
||||
} catch (error: any) {
|
||||
return rejectWithValue(error.response?.data || 'Failed to fetch documents');
|
||||
// if(error.status === 401) {}
|
||||
return rejectWithValue(error.response?.data || "Failed to fetch documents");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// -----------------------
|
||||
// Thunk: Upload Documents
|
||||
// -----------------------
|
||||
export const uploadDocuments = createAsyncThunk<
|
||||
Document[],
|
||||
{ formData: FormData; accountId: string; transactionId: string }
|
||||
>(
|
||||
'documents/uploadDocuments',
|
||||
async ({ formData, accountId, transactionId }, { dispatch, rejectWithValue, getState }) => {
|
||||
// Upload multiple documents using FormData (Key: "document")
|
||||
export const uploadDocuments = createAsyncThunk<Document[], uploadArgs>(
|
||||
"documents/uploadDocuments",
|
||||
async ({ formData, accountId, transactionId }, { dispatch, rejectWithValue }) => {
|
||||
try {
|
||||
dispatch(showLoader('Uploading documents...'));
|
||||
dispatch(showLoader("Uploading documents..."));
|
||||
console.log("Form Data", formData.getAll("document"))
|
||||
|
||||
const state = getState() as {
|
||||
selectedRecipients: { transactionTemplateToggle: string };
|
||||
};
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
const response = await api.post(`/api/accounts/${accountId}/transactions/${transactionId}/documents`, formData, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
},
|
||||
});
|
||||
|
||||
const response = await api.post(
|
||||
`/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
}
|
||||
);
|
||||
console.log("Form Uploaded Response DocumentSlice Line 185", response.data)
|
||||
|
||||
dispatch(hideLoader());
|
||||
return [response.data];
|
||||
} catch (error: any) {
|
||||
dispatch(hideLoader());
|
||||
|
||||
toast.error('Error Uploading Document', {
|
||||
position: 'bottom-right',
|
||||
toast.error("Error Uploading Document", {
|
||||
position: "bottom-right",
|
||||
autoClose: 3000,
|
||||
theme: 'light',
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: false,
|
||||
draggable: false,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
|
||||
return rejectWithValue('Failed Uploading Documents');
|
||||
console.log("Failed Uploading Documents")
|
||||
throw new Error("Failed Uploading Documents")
|
||||
|
||||
// Mock data in case of failure
|
||||
// const failedDocuments = formData.getAll("document").map((file: any) => ({
|
||||
// id: uuidv4(),
|
||||
// name: file.name,
|
||||
// extension: file.name.split(".").pop() || "unknown",
|
||||
// original: Math.random() < 0.5,
|
||||
// corrupted: Math.random() < 0.5,
|
||||
// }));
|
||||
|
||||
// dispatch(updateSelectedDocuments({ documents: failedDocuments }));
|
||||
// return failedDocuments; // Instead of rejecting, return mock data
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// -----------------------
|
||||
// Slice
|
||||
// -----------------------
|
||||
const documentsSlice = createSlice({
|
||||
name: 'documents',
|
||||
const documentSlice = createSlice({
|
||||
name: "documents",
|
||||
initialState,
|
||||
reducers: {
|
||||
setDocuments: (state, action: PayloadAction<Document[]>) => {
|
||||
|
|
@ -289,34 +127,29 @@ const documentsSlice = createSlice({
|
|||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
// fetchDocuments
|
||||
// Fetch documents
|
||||
.addCase(fetchDocuments.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(fetchDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
state.loading = false;
|
||||
console.log(action.payload, "action.payload")
|
||||
state.documents = action.payload;
|
||||
})
|
||||
.addCase(fetchDocuments.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
state.error = action.payload as string;
|
||||
toast.error('Failed to fetch documents', {
|
||||
position: 'bottom-right',
|
||||
autoClose: 3000,
|
||||
theme: 'light',
|
||||
transition: Bounce,
|
||||
});
|
||||
})
|
||||
|
||||
// uploadDocuments
|
||||
// Upload multiple documents
|
||||
.addCase(uploadDocuments.pending, (state) => {
|
||||
state.loading = true;
|
||||
state.error = null;
|
||||
})
|
||||
.addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
|
||||
state.loading = false;
|
||||
state.documents.push(...action.payload);
|
||||
state.documents = [...action.payload, ...state.documents];
|
||||
})
|
||||
.addCase(uploadDocuments.rejected, (state, action) => {
|
||||
state.loading = false;
|
||||
|
|
@ -325,8 +158,5 @@ const documentsSlice = createSlice({
|
|||
},
|
||||
});
|
||||
|
||||
// -----------------------
|
||||
// Exports
|
||||
// -----------------------
|
||||
export const { deleteDocument, resetDocuments, setDocuments, setDocProgComplete } = documentsSlice.actions;
|
||||
export default documentsSlice.reducer;
|
||||
export const { resetDocuments, setDocuments, setDocProgComplete, deleteDocument } = documentSlice.actions;
|
||||
export default documentSlice.reducer;
|
||||
|
|
@ -1,340 +1,11 @@
|
|||
// import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
// import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||
// import { toast } from 'react-toastify';
|
||||
// import colors from '../../utlity/colorsArr';
|
||||
// import api from '../../config/api';
|
||||
|
||||
|
||||
|
||||
// export enum recipientType {
|
||||
// SIGNER = "Signer",
|
||||
// INPERSONSIGNER = "InPersonSigner",
|
||||
// CC = "CC"
|
||||
// }
|
||||
|
||||
// export interface Recipient {
|
||||
// id?: string;
|
||||
// firstName: string;
|
||||
// lastName: string;
|
||||
// routingOrder: number;
|
||||
// email: string;
|
||||
// hostName: string;
|
||||
// hostEmail: string;
|
||||
// type: recipientType;
|
||||
// color?: string;
|
||||
// }
|
||||
|
||||
// export interface SelectedRecipientInt {
|
||||
// recipients: Recipient[],
|
||||
// signingOrder: boolean,
|
||||
// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE
|
||||
// }
|
||||
|
||||
// interface AddRecipientArgs {
|
||||
// recipientsData: Recipient[];
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// }
|
||||
|
||||
// export enum TRANSACTION_TEMPLATE_TOGGLE {
|
||||
// TRANSACTIONS = "transactions",
|
||||
// TEMPLATES = "templates"
|
||||
// }
|
||||
|
||||
// const initialState: SelectedRecipientInt = {
|
||||
// recipients: [],
|
||||
// signingOrder: false,
|
||||
// transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS
|
||||
// };
|
||||
|
||||
// export const addRecipientAsync = createAsyncThunk<Recipient[], AddRecipientArgs>(
|
||||
// 'selectedRecipients/addRecipientAsync',
|
||||
// async ({ recipientsData, accountId, transactionId }, { rejectWithValue }) => {
|
||||
// console.log(recipientsData, accountId, transactionId, "recipientsData Line 46");
|
||||
// try {
|
||||
// console.log(recipientsData, "recipientsData --- Line 48");
|
||||
|
||||
// const updateRecipientsData = recipientsData.filter((recipient, idx) => recipient.id !== null);
|
||||
// const createRecipientsData = recipientsData.filter((recipient, idx) => recipient.id == null);
|
||||
|
||||
// console.log(updateRecipientsData, "updateRecipientsData Line 52");
|
||||
// console.log(createRecipientsData, "createRecipientsData Line 53");
|
||||
|
||||
// const resUpdate = await api.put(
|
||||
// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
|
||||
// updateRecipientsData
|
||||
// );
|
||||
|
||||
// const resCreate = await api.post(
|
||||
// `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
|
||||
// createRecipientsData
|
||||
// );
|
||||
|
||||
// if (createRecipientsData.length === 0) resCreate.data = [];
|
||||
// if (updateRecipientsData.length === 0) resUpdate.data = [];
|
||||
|
||||
// console.log(resCreate, "resCreate");
|
||||
// console.log(resUpdate, "resUpdate");
|
||||
|
||||
// return [...resCreate.data, ...resUpdate.data] as Recipient[];
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue(err.response?.data || "Failed to add recipient");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// interface RemoveRecipientAsyncInterfaceObj {
|
||||
// id?: string;
|
||||
// email?: string;
|
||||
// }
|
||||
|
||||
// interface RemoveRecipientAsyncInterface {
|
||||
// recipientId: number | null;
|
||||
// accountId: string;
|
||||
// transactionId: string;
|
||||
// email: string;
|
||||
// }
|
||||
|
||||
// export const removeRecipientAsync = createAsyncThunk<string | number, RemoveRecipientAsyncInterface>(
|
||||
// 'selectedRecipients/removeRecipientAsync',
|
||||
// async (obj, { rejectWithValue }) => {
|
||||
// try {
|
||||
// if (obj.recipientId) {
|
||||
// const res = await api.delete(`/api/accounts/${obj.accountId}/transactions/${obj.transactionId}/recipients/${obj.recipientId}`);
|
||||
// console.log(res, "Line 77")
|
||||
// return obj.recipientId;
|
||||
// }
|
||||
// return obj.email
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue("Failed to remove recipient");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// export const fetchRecipients = createAsyncThunk<Recipient[], { accountId: string, transactionId: string }>(
|
||||
// 'selectedRecipients/fetchRecipients',
|
||||
// async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
// try {
|
||||
// const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`);
|
||||
// return response.data as Recipient[];
|
||||
// } catch (err: any) {
|
||||
// return rejectWithValue(err.response?.data || "Failed to fetch recipients");
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
|
||||
// const selectedRecipientsSlice = createSlice({
|
||||
// name: 'selectedRecipients',
|
||||
// initialState,
|
||||
// reducers: {
|
||||
// // Add a single recipient
|
||||
// addRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
// for (const recipient of state.recipients) {
|
||||
// if (recipient.email === action.payload.email) {
|
||||
// toast.dismiss();
|
||||
// toast.error("Email already exists !", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// return state;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Adding Recipient on top if type is inPersonSigner
|
||||
// console.log("Getting Type ", action.payload.type)
|
||||
// if (action.payload.type === recipientType.INPERSONSIGNER) {
|
||||
// state.signingOrder = true
|
||||
// state.recipients = [action.payload, ...state.recipients]
|
||||
// } else {
|
||||
// state.recipients.push(action.payload);
|
||||
// }
|
||||
|
||||
// },
|
||||
// resetRecipients: (state) => {
|
||||
// state.recipients = [];
|
||||
// },
|
||||
// toggleToTemplates: (state) => {
|
||||
// state.transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||
// },
|
||||
// // Replace the entire selectedRecipients array
|
||||
// setSelectedRecipients: (state, action: PayloadAction<Recipient[]>) => {
|
||||
// for (const [index, recipient] of action.payload.entries()) {
|
||||
// if ((recipient.type === recipientType.INPERSONSIGNER && index > 0) && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
|
||||
// return state;
|
||||
// }
|
||||
// }
|
||||
|
||||
// state.recipients = action.payload;
|
||||
// },
|
||||
// setSigningOrder: (state, action: PayloadAction<boolean>) => {
|
||||
|
||||
// for (const recipient of state.recipients) {
|
||||
// if (recipient.type === recipientType.INPERSONSIGNER) {
|
||||
// if (state.signingOrder) return state;
|
||||
// state.signingOrder = true;
|
||||
// return state
|
||||
// }
|
||||
// }
|
||||
|
||||
// state.signingOrder = action.payload;
|
||||
// },
|
||||
// // Remove Recipients
|
||||
// removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
// console.log("removeSelectedRecipient Called")
|
||||
// state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
|
||||
// },
|
||||
|
||||
// // Add Color in Recipient
|
||||
// addColorsToRecipient: (state) => {
|
||||
// // const colors = generateUniqueColors(state.recipients.length);
|
||||
// for (const [index, recipient] of state.recipients.entries()) {
|
||||
// console.log(state)
|
||||
// recipient.color = colors[index]
|
||||
// }
|
||||
// return state;
|
||||
// },
|
||||
// updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => {
|
||||
// console.log("recipient order called Line 159")
|
||||
// const { id, routingOrder } = action.payload;
|
||||
// const recipient = state.recipients.find((r) => r.id === id || r.email === id);
|
||||
// if (recipient) {
|
||||
// recipient.routingOrder = routingOrder;
|
||||
// }
|
||||
// },
|
||||
// updateRecipientIds: (state, action: PayloadAction<Recipient[]>) => {
|
||||
// console.log("updateRecipientIds", console.table(action.payload));
|
||||
// for (const recObj of state.recipients) {
|
||||
// const email = recObj.email
|
||||
// for (const recObj2 of action.payload) {
|
||||
// recObj.id = recObj2.id;
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// resetSelRecipient: (state) => {
|
||||
// state = initialState;
|
||||
// return state;
|
||||
// }
|
||||
// },
|
||||
// extraReducers: (builder) => {
|
||||
// builder
|
||||
// // Fetch Recipient - START
|
||||
// .addCase(fetchRecipients.pending, (state) => {
|
||||
// })
|
||||
// .addCase(fetchRecipients.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
// // console.log("Fetched recipients successfully:", action.payload);
|
||||
|
||||
// // Assign colors to recipients
|
||||
// const assignedRecipients = action.payload.map((recipient, index) => ({
|
||||
// ...recipient,
|
||||
// color: colors[index], // Cycle if more recipients than colors
|
||||
// }));
|
||||
|
||||
// state.recipients = assignedRecipients;
|
||||
// })
|
||||
// .addCase(fetchRecipients.rejected, (state, action) => {
|
||||
// console.error("Failed to fetch recipients:", action.payload);
|
||||
// toast.error("Failed to fetch recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Fetch Recipient - END
|
||||
|
||||
// // Add Recipient - START
|
||||
// .addCase(addRecipientAsync.pending, (state) => {
|
||||
|
||||
// })
|
||||
|
||||
|
||||
// .addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
// // Optionally avoid duplicates if needed
|
||||
|
||||
// console.log("addRecipientAsync Called Line 258", action.payload);
|
||||
// // const newRecipients = action.payload.filter(newRec => {
|
||||
// // return !state.recipients.some(existing => existing existing.id === newRec.id);
|
||||
// // });
|
||||
|
||||
// // const newRecipients = action.payload.filter(newRec => {
|
||||
// // return !state.recipients.some(existing => "id" in existing && existing.id === newRec.id);
|
||||
// // });
|
||||
|
||||
// // // Add new recipients and assign colors
|
||||
// // const startIndex = state.recipients.length;
|
||||
// // newRecipients.forEach((rec, index) => {
|
||||
// // rec.color = colors[startIndex + index];
|
||||
// // state.recipients.push(rec);
|
||||
// // });
|
||||
|
||||
// state.recipients = action.payload.map((recipient, index) => ({
|
||||
// ...recipient,
|
||||
// color: colors[index % colors.length], // Cycle through colors
|
||||
// }));
|
||||
|
||||
// })
|
||||
|
||||
|
||||
// .addCase(addRecipientAsync.rejected, (state, action) => {
|
||||
// console.error("Failed to fetch recipients:", action.payload);
|
||||
// toast.error("Failed to fetch recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Add Recipient - END
|
||||
|
||||
// // Fetch Recipient - START
|
||||
// .addCase(removeRecipientAsync.pending, (state) => {
|
||||
// })
|
||||
// .addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction<string | number>) => {
|
||||
// state.recipients = state.recipients.filter(
|
||||
// (recipient) => recipient.id !== action.payload && recipient.email !== action.payload
|
||||
// );
|
||||
// })
|
||||
// .addCase(removeRecipientAsync.rejected, (state, action) => {
|
||||
// console.error("Failed to Delete recipients:", action.payload);
|
||||
// toast.error("Failed to Delete recipients", {
|
||||
// position: "bottom-right",
|
||||
// autoClose: 5000,
|
||||
// hideProgressBar: false,
|
||||
// closeOnClick: false,
|
||||
// pauseOnHover: true,
|
||||
// draggable: true,
|
||||
// progress: undefined,
|
||||
// theme: "light",
|
||||
// });
|
||||
// })
|
||||
// // Fetch Recipient - END
|
||||
// }
|
||||
// });
|
||||
|
||||
// export const { addRecipient, setSelectedRecipients, toggleToTemplates, removeSelectedRecipient, setSigningOrder, addColorsToRecipient, updateRecipientIds, resetSelRecipient, updateRecipientOrder, resetRecipients } = selectedRecipientsSlice.actions;
|
||||
// export default selectedRecipientsSlice.reducer;
|
||||
|
||||
|
||||
|
||||
import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||
import { createAsyncThunk } from '@reduxjs/toolkit';
|
||||
import { toast } from 'react-toastify';
|
||||
import colors from '../../utlity/colorsArr';
|
||||
import api from '../../config/api';
|
||||
|
||||
|
||||
|
||||
export enum recipientType {
|
||||
SIGNER = "Signer",
|
||||
INPERSONSIGNER = "InPersonSigner",
|
||||
|
|
@ -355,106 +26,54 @@ export interface Recipient {
|
|||
|
||||
export interface SelectedRecipientInt {
|
||||
recipients: Recipient[],
|
||||
signingOrder: boolean,
|
||||
transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE
|
||||
signingOrder: boolean
|
||||
}
|
||||
|
||||
interface AddRecipientArgs {
|
||||
recipientsData: Recipient[];
|
||||
accountId: string;
|
||||
transactionId: string;
|
||||
transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE;
|
||||
}
|
||||
|
||||
interface RemoveRecipientAsyncInterface {
|
||||
recipientId: number | null;
|
||||
accountId: string;
|
||||
transactionId: string;
|
||||
email: string;
|
||||
transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE;
|
||||
}
|
||||
|
||||
export enum TRANSACTION_TEMPLATE_TOGGLE {
|
||||
TRANSACTIONS = "transactions",
|
||||
TEMPLATES = "templates"
|
||||
}
|
||||
|
||||
const initialState: SelectedRecipientInt = {
|
||||
recipients: [],
|
||||
signingOrder: false,
|
||||
transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS
|
||||
signingOrder: false
|
||||
};
|
||||
|
||||
// 1. Add Recipient Async
|
||||
export const addRecipientAsync = createAsyncThunk<
|
||||
Recipient[],
|
||||
{ recipientsData: Recipient[]; accountId: string; transactionId: string }
|
||||
>(
|
||||
export const addRecipientAsync = createAsyncThunk<Recipient[], AddRecipientArgs>(
|
||||
'selectedRecipients/addRecipientAsync',
|
||||
async ({ recipientsData, accountId, transactionId }, { rejectWithValue, getState }) => {
|
||||
async ({ recipientsData, accountId, transactionId }, { rejectWithValue }) => {
|
||||
console.log(recipientsData, accountId, transactionId, "recipientsData Line 46");
|
||||
try {
|
||||
const state = getState() as { selectedRecipients: SelectedRecipientInt };
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
|
||||
const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
|
||||
const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
|
||||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
|
||||
const resUpdate = updateRecipientsData.length
|
||||
? await api.put(basePath, updateRecipientsData)
|
||||
: { data: [] };
|
||||
|
||||
const resCreate = createRecipientsData.length
|
||||
? await api.post(basePath, createRecipientsData)
|
||||
: { data: [] };
|
||||
|
||||
return [...resCreate.data, ...resUpdate.data] as Recipient[];
|
||||
const response = await api.post(
|
||||
`/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
|
||||
recipientsData
|
||||
);
|
||||
console.log(response)
|
||||
return response.data as Recipient[];
|
||||
} catch (err: any) {
|
||||
return rejectWithValue(err.response?.data || "Failed to add recipient");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 2. Remove Recipient Async
|
||||
export const removeRecipientAsync = createAsyncThunk<
|
||||
string | number,
|
||||
{ recipientId: number | null; accountId: string; transactionId: string; email: string }
|
||||
>(
|
||||
export const removeRecipientAsync = createAsyncThunk<string, string>(
|
||||
'selectedRecipients/removeRecipientAsync',
|
||||
async ({ recipientId, accountId, transactionId, email }, { rejectWithValue, getState }) => {
|
||||
async (email, { rejectWithValue }) => {
|
||||
try {
|
||||
const state = getState() as { selectedRecipients: SelectedRecipientInt };
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
|
||||
if (recipientId) {
|
||||
await api.delete(`${basePath}/${recipientId}`);
|
||||
return recipientId;
|
||||
}
|
||||
|
||||
return email;
|
||||
await api.delete(`/api/recipients`, { data: { email } });
|
||||
return email; // return email so we can filter from state
|
||||
} catch (err: any) {
|
||||
return rejectWithValue("Failed to remove recipient");
|
||||
return rejectWithValue(err.response?.data || "Failed to remove recipient");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// 3. Fetch Recipients Async
|
||||
export const fetchRecipients = createAsyncThunk<
|
||||
Recipient[],
|
||||
{ accountId: string; transactionId: string }
|
||||
>(
|
||||
export const fetchRecipients = createAsyncThunk<Recipient[], { accountId: string, transactionId: string }>(
|
||||
'selectedRecipients/fetchRecipients',
|
||||
async ({ accountId, transactionId }, { rejectWithValue, getState }) => {
|
||||
async ({ accountId, transactionId }, { rejectWithValue }) => {
|
||||
try {
|
||||
const state = getState() as { selectedRecipients: SelectedRecipientInt };
|
||||
const toggle = state.selectedRecipients.transactionTemplateToggle;
|
||||
|
||||
const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
|
||||
const response = await api.get(basePath);
|
||||
|
||||
const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`);
|
||||
return response.data as Recipient[];
|
||||
} catch (err: any) {
|
||||
return rejectWithValue(err.response?.data || "Failed to fetch recipients");
|
||||
|
|
@ -466,6 +85,7 @@ const selectedRecipientsSlice = createSlice({
|
|||
name: 'selectedRecipients',
|
||||
initialState,
|
||||
reducers: {
|
||||
// Add a single recipient
|
||||
addRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
for (const recipient of state.recipients) {
|
||||
if (recipient.email === action.payload.email) {
|
||||
|
|
@ -473,29 +93,34 @@ const selectedRecipientsSlice = createSlice({
|
|||
toast.error("Email already exists !", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
});
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
// Adding Recipient on top if type is inPersonSigner
|
||||
console.log("Getting Type ", action.payload.type)
|
||||
if (action.payload.type === recipientType.INPERSONSIGNER) {
|
||||
state.signingOrder = true;
|
||||
state.recipients = [action.payload, ...state.recipients];
|
||||
state.signingOrder = true
|
||||
state.recipients = [action.payload, ...state.recipients]
|
||||
} else {
|
||||
state.recipients.push(action.payload);
|
||||
}
|
||||
|
||||
},
|
||||
resetRecipients: (state) => {
|
||||
state.recipients = [];
|
||||
},
|
||||
toggleToTemplates: (state) => {
|
||||
state.transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
|
||||
},
|
||||
// Replace the entire selectedRecipients array
|
||||
setSelectedRecipients: (state, action: PayloadAction<Recipient[]>) => {
|
||||
for (const [index, recipient] of action.payload.entries()) {
|
||||
if ((recipient.type === recipientType.INPERSONSIGNER && index > 0)
|
||||
&& action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
|
||||
if ((recipient.type === recipientType.INPERSONSIGNER && index > 0) && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
|
@ -503,26 +128,35 @@ const selectedRecipientsSlice = createSlice({
|
|||
state.recipients = action.payload;
|
||||
},
|
||||
setSigningOrder: (state, action: PayloadAction<boolean>) => {
|
||||
|
||||
for (const recipient of state.recipients) {
|
||||
if (recipient.type === recipientType.INPERSONSIGNER) {
|
||||
if (state.signingOrder) return state;
|
||||
state.signingOrder = true;
|
||||
return state;
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
state.signingOrder = action.payload;
|
||||
},
|
||||
// Remove Recipients
|
||||
removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
|
||||
console.log("removeSelectedRecipient Called")
|
||||
state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
|
||||
},
|
||||
|
||||
// Add Color in Recipient
|
||||
addColorsToRecipient: (state) => {
|
||||
// const colors = generateUniqueColors(state.recipients.length);
|
||||
for (const [index, recipient] of state.recipients.entries()) {
|
||||
recipient.color = colors[index];
|
||||
console.log(state)
|
||||
debugger
|
||||
recipient.color = colors[index]
|
||||
}
|
||||
return state;
|
||||
},
|
||||
updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => {
|
||||
console.log("recipient order called Line 159")
|
||||
const { id, routingOrder } = action.payload;
|
||||
const recipient = state.recipients.find((r) => r.id === id || r.email === id);
|
||||
if (recipient) {
|
||||
|
|
@ -530,22 +164,33 @@ const selectedRecipientsSlice = createSlice({
|
|||
}
|
||||
},
|
||||
updateRecipientIds: (state, action: PayloadAction<Recipient[]>) => {
|
||||
console.log("updateRecipientIds", console.table(action.payload));
|
||||
for (const recObj of state.recipients) {
|
||||
const email = recObj.email
|
||||
for (const recObj2 of action.payload) {
|
||||
recObj.id = recObj2.id;
|
||||
}
|
||||
}
|
||||
},
|
||||
resetSelRecipient: () => initialState
|
||||
resetSelRecipient: (state) => {
|
||||
state = initialState;
|
||||
return state;
|
||||
}
|
||||
},
|
||||
extraReducers: (builder) => {
|
||||
builder
|
||||
.addCase(fetchRecipients.pending, () => { })
|
||||
.addCase(fetchRecipients.pending, (state) => {
|
||||
console.log("Fetching recipients...");
|
||||
})
|
||||
.addCase(fetchRecipients.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
console.log("Fetched recipients successfully:", action.payload);
|
||||
|
||||
// Assign colors to recipients
|
||||
const assignedRecipients = action.payload.map((recipient, index) => ({
|
||||
...recipient,
|
||||
color: colors[index],
|
||||
color: colors[index], // Cycle if more recipients than colors
|
||||
}));
|
||||
|
||||
state.recipients = assignedRecipients;
|
||||
})
|
||||
.addCase(fetchRecipients.rejected, (state, action) => {
|
||||
|
|
@ -553,52 +198,39 @@ const selectedRecipientsSlice = createSlice({
|
|||
toast.error("Failed to fetch recipients", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
});
|
||||
})
|
||||
.addCase(addRecipientAsync.pending, () => { })
|
||||
.addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
|
||||
state.recipients = action.payload.map((recipient, index) => ({
|
||||
...recipient,
|
||||
color: colors[index % colors.length],
|
||||
}));
|
||||
|
||||
|
||||
.addCase(addRecipientAsync.pending, (state) => {
|
||||
console.log("Fetching recipients...");
|
||||
})
|
||||
.addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction<Recipient>) => {
|
||||
console.log("Added recipient successfully:", action.payload);
|
||||
// state.recipients.push(action.payload);
|
||||
})
|
||||
.addCase(addRecipientAsync.rejected, (state, action) => {
|
||||
console.error("Failed to add recipients:", action.payload);
|
||||
toast.error("Failed to add recipients", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
theme: "light",
|
||||
});
|
||||
})
|
||||
.addCase(removeRecipientAsync.pending, () => { })
|
||||
.addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction<string | number>) => {
|
||||
state.recipients = state.recipients.filter(
|
||||
(recipient) => recipient.id !== action.payload && recipient.email !== action.payload
|
||||
);
|
||||
})
|
||||
.addCase(removeRecipientAsync.rejected, (state, action) => {
|
||||
console.error("Failed to delete recipient:", action.payload);
|
||||
toast.error("Failed to delete recipient", {
|
||||
console.error("Failed to fetch recipients:", action.payload);
|
||||
toast.error("Failed to fetch recipients", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
export const {
|
||||
addRecipient,
|
||||
setSelectedRecipients,
|
||||
toggleToTemplates,
|
||||
removeSelectedRecipient,
|
||||
setSigningOrder,
|
||||
addColorsToRecipient,
|
||||
updateRecipientIds,
|
||||
resetSelRecipient,
|
||||
updateRecipientOrder,
|
||||
resetRecipients
|
||||
} = selectedRecipientsSlice.actions;
|
||||
|
||||
export const { addRecipient, setSelectedRecipients, removeSelectedRecipient, setSigningOrder, addColorsToRecipient, updateRecipientIds, resetSelRecipient, updateRecipientOrder, resetRecipients } = selectedRecipientsSlice.actions;
|
||||
export default selectedRecipientsSlice.reducer;
|
||||
|
|
|
|||
|
|
@ -79,41 +79,3 @@ export interface AccountData {
|
|||
role: UserRole;
|
||||
status: AccountStatus;
|
||||
}
|
||||
|
||||
export interface TagsProperties {
|
||||
"editable": boolean;
|
||||
"required": boolean;
|
||||
"navigationOrder": number;
|
||||
"type": string;
|
||||
"lastName"?: boolean;
|
||||
"firstName"?: boolean;
|
||||
"maxLength"?: number;
|
||||
"minLength"?: number;
|
||||
"readOnly"?: boolean;
|
||||
"multiLine"?: boolean;
|
||||
"regex"?: string[];
|
||||
"format"?: string;
|
||||
"dateFormat"?: string;
|
||||
"currentTimeStamp"?: boolean;
|
||||
"decimalPlace"?: number;
|
||||
"multiSelect"?: boolean;
|
||||
}
|
||||
|
||||
|
||||
export enum TagsTypes {
|
||||
TEXT= "text",
|
||||
SIGNATURE= "signature",
|
||||
INITIALS= "initials",
|
||||
TEMPORAL= "temporal",
|
||||
NUMBER= "number",
|
||||
IMAGE= "image",
|
||||
STAMP= "stamp",
|
||||
CHECKBOX= "checkbox",
|
||||
SELECT= "select",
|
||||
FILE= "file",
|
||||
ATTACHMENT= "attachment",
|
||||
RADIO= "radio",
|
||||
EMAIL= "email",
|
||||
NAME= "name",
|
||||
COMPANY= "company",
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ export default defineConfig({
|
|||
'quality-friendly-goldfish.ngrok-free.app',
|
||||
'officially-powerful-goat.ngrok-free.app',
|
||||
'89f0-49-36-189-120.ngrok-free.app',
|
||||
'c8ee-49-36-191-130.ngrok-free.app',
|
||||
'c76f1251c173.ngrok-free.app',
|
||||
'enabled-upright-boxer.ngrok-free.app'
|
||||
'c8ee-49-36-191-130.ngrok-free.app'
|
||||
],
|
||||
},
|
||||
build: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue