+
{/* Single mail icon on top */}
@@ -85,7 +85,7 @@ const SigningOrderDiagram : React.FC = (signers) => {
-
+
{sortedOrders.map((order, index) => (
diff --git a/src/components/accounts/Account.tsx b/src/components/accounts/Account.tsx
index 602a507..1d63d5a 100644
--- a/src/components/accounts/Account.tsx
+++ b/src/components/accounts/Account.tsx
@@ -4,6 +4,8 @@ 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";
interface Transaction {
id: number;
@@ -23,6 +25,12 @@ const Account = () => {
const [transactions, setTransactions] = useState([]);
const [selectedTransactions, setSelectedTransactions] = useState([]);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const handleOpenModal = () => {
+ setIsModalOpen(true);
+ };
+
const fetchTransactions = async () => {
try {
const response = await api(`/api/accounts/${accountId}/transactions`);
@@ -42,8 +50,14 @@ const Account = () => {
navigate(`/accounts/${accountId}/transactions/${id}`);
};
+ const handleAddAccount = (accountName: string) => {
+ console.log(accountId)
+ setIsModalOpen(false);
+ };
+
return (
<>
+
@@ -102,6 +116,8 @@ const Account = () => {
)}
+ {isModalOpen && setIsModalOpen(false)}
+ onAddAccount={handleAddAccount} />}
);
};
diff --git a/src/components/accounts/AccountNav.tsx b/src/components/accounts/AccountNav.tsx
index 4d2b338..5024e7e 100644
--- a/src/components/accounts/AccountNav.tsx
+++ b/src/components/accounts/AccountNav.tsx
@@ -1,105 +1,185 @@
-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 React, { useEffect, useRef, useState } from 'react';
+// import { useSelector } from 'react-redux';
+import { Link, useLocation } from 'react-router-dom';
+import { FaSignOutAlt,FaUser } from "react-icons/fa";
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;
-// }
-// }
-
+// import { RootState } from '../../store/store';
+// import { UserState } from '../../store/slices/userSlice';
interface AccountNavProps {
- accountName: string | null;
- transactionName: string | null;
+ accountName?: string | null;
+ transactionName?: string | null;
+}
+
+// Define the shape of state object
+interface Account {
+ id: number;
+ isDefault: boolean;
+ name: string;
+}
+
+interface UserData {
+ id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ language: string;
+ account: Account;
}
const AccountNav: React.FC = ({ accountName = null, transactionName = null }) => {
- const user: UserState = useSelector((state: RootState) => state.user);
+ // const user: UserState = useSelector((state: RootState) => state.user);
+
+ const [user, setUser] = useState({
+ id: "",
+ firstName: "",
+ lastName: "",
+ email: "",
+ language: "",
+ account: {
+ id: 0,
+ isDefault: false,
+ name: "",
+ },
+ });
+
+ const getUserDetails = async () => {
+ try {
+ let res = await api.get(`/api/user/details`)
+ console.log("getuser", res)
+ setUser(res?.data)
+ } catch (error) {
+ console.error("Error fetching user details:", error);
+ }
+ }
+
+ useEffect(() => {
+ getUserDetails()
+ }, [])
+
+
+ const location = useLocation();
+
+ const pathnames = location.pathname
+ .split("/")
+ .filter((x) => x && isNaN(Number(x))); // remove numeric IDs
+
+ const labelMap: Record = {
+ accounts: "Accounts",
+ transactions: "Transactions",
+ // Add more routes here if needed
+ };
+
+ const [open, setOpen] = useState(false);
+ const dropdownRef = useRef(null);
+
+ // Close dropdown when clicked outside
+ useEffect(() => {
+ function handleClickOutside(event: MouseEvent) {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+ setOpen(false);
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
+ const handleLogout = () => {
+ // Add logout logic here
+ console.log('Logging out...');
+ setOpen(false);
+ };
- const initials = user.username
- ? user.username
- .split(' ')
- .map((n) => n[0])
- .join('')
- .slice(0, 2)
- .toUpperCase()
- : 'U';
- // 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 (
+
- {/*
Account
*/} +
-
- {/* Notification + Settings with smaller gap */}
- = ({ accountName = null, transaction
);
};
-export default AccountNav;
+export default AccountNav;
\ No newline at end of file
diff --git a/src/components/accounts/Accounts.tsx b/src/components/accounts/Accounts.tsx
index ecfff3d..171f131 100644
--- a/src/components/accounts/Accounts.tsx
+++ b/src/components/accounts/Accounts.tsx
@@ -6,6 +6,9 @@ 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 { UserRole, AccountStatus, AccountData } from "../../types/account";
@@ -32,6 +35,13 @@ const getStatusLabel = (
const Accounts = () => {
const [allAccounts, setAllAccounts] = useState([]);
const [selectedAccounts, setSelectedAccounts] = useState([]);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [accounts, setAccounts] = useState([]);
+ const [openMenuId, setOpenMenuId] = useState(null);
+
+ const handleOpenModal = () => {
+ setIsModalOpen(true);
+ };
const navigate = useNavigate();
@@ -53,8 +63,43 @@ const Accounts = () => {
navigate(`/accounts/${id}/transactions`);
};
+ const handleAddAccount = (accountName: string) => {
+ setAccounts((prev) => [...prev, accountName]);
+ setIsModalOpen(false);
+ };
+
+ 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 (
<>
+
@@ -101,8 +146,38 @@ const Accounts = () => {
{status.text}
-
)}
+ {isModalOpen && setIsModalOpen(false)}
+ onAddAccount={handleAddAccount} />}
);
};
diff --git a/src/components/accounts/AddAccountModal.tsx b/src/components/accounts/AddAccountModal.tsx
new file mode 100644
index 0000000..606972f
--- /dev/null
+++ b/src/components/accounts/AddAccountModal.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+interface AddAccountModalProps {
+ onClose: () => void;
+ onAddAccount: (accountName: string) => void;
+}
+
+const AddAccountModal: React.FC = ({ onClose, onAddAccount }) => {
+ const [inputValue, setInputValue] = useState('');
+
+ const handleAddClick = () => {
+ if (inputValue.trim()) {
+ onAddAccount(inputValue.trim());
+ setInputValue(''); // clear input after submit
+ }
+ };
+
+ return (
+ = ({ onClose, onAddAccount }) => {
+ const [inputValue, setInputValue] = useState('');
+
+ const handleAddClick = () => {
+ if (inputValue.trim()) {
+ onAddAccount(inputValue.trim());
+ setInputValue(''); // clear input after submit
+ }
+ };
+
+ return (
+ = ({ type, onOpenModal }) => {
+ const [selectedFilter, setSelectedFilter] = useState('Last 7 Days');
+ const [showCards, setShowCards] = useState([]);
+
+ useEffect(() => {
+ if (type === 'account') {
+ setShowCards(AccountData);
+ } else {
+ setShowCards(cards);
+ }
+ }, [type]);
return (
+ {/* User Dropdown */}
+
@@ -107,4 +187,4 @@ const AccountNav: React.FC
+ {/* Avatar Button */}
-
-
+ {/* Enhanced Dropdown */}
+ {open && (
+
+ {/* User Info Section */}
+
+
- {/* Avatar with separate spacing */}
-
+
+
+ {(user) ? (
+ {(user.firstName.slice(0,1) + user.lastName.slice(0,1)).toUpperCase()}
+ ) : (
+
+
+
+ {user.firstName + ' ' +user.lastName || '-'}
+ {user.email || '-'}
+
+ Account #{user?.account?.name || '-'}
+
+
- {user.picture ? (
- 
- ) : (
- initials
+ {/* Logout Section */}
+
)}
+
+
+ |
- |
+
+
+ {/* Dropdown menu */}
+ {openMenuId === account.accountId && (
+ e.stopPropagation()} // prevent row click closing
+ >
+
+
+
+ )}
|
);
@@ -111,6 +186,8 @@ const Accounts = () => {
+
+ );
+};
+
+export default AddAccountModal;
diff --git a/src/components/accounts/AddInviteModal.tsx b/src/components/accounts/AddInviteModal.tsx
new file mode 100644
index 0000000..dc72141
--- /dev/null
+++ b/src/components/accounts/AddInviteModal.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+
+interface AddAccountModalProps {
+ onClose: () => void;
+ onAddAccount: (accountName: string) => void;
+}
+const AddInviteModal : React.FC
+
+ Add New Account
+ 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)]" + /> +
+
+
+
+
+
+ )
+}
+
+export default AddInviteModal
\ No newline at end of file
diff --git a/src/components/home/Cards.tsx b/src/components/home/Cards.tsx
index dbe9be0..16dbc30 100644
--- a/src/components/home/Cards.tsx
+++ b/src/components/home/Cards.tsx
@@ -1,7 +1,22 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { FaCheckCircle, FaClock, FaHourglassHalf, FaTasks } from 'react-icons/fa';
-const cards = [
+// Define a type for card data
+interface CardData {
+ title: string;
+ count: number;
+ icon: JSX.Element;
+ ring: string;
+ bg: string;
+}
+
+interface CardsProps {
+ type?: 'dashboard';
+ // onCardClick?: (card: CardData) => void;
+ onOpenModal?: () => void;
+}
+
+const cards: CardData[] = [
{
title: 'Action Required',
count: 12,
@@ -32,48 +47,89 @@ const cards = [
},
];
+const AccountData: CardData[] = [
+ {
+ title: 'Transaction',
+ count: 12,
+ icon:
+
+ Send Invite
+ 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)]" + /> +
+
+
+
+
{/* Header */}
-
-
{/* Cards */}
Overview
+
+
+ Overview
-
- {/* Account Selector */}
-
-
- {/* Date Filter */}
-
-
-
+ {/* Account Selector */}
+
+ {/* Date Filter */}
+
+ {type === 'account' &&
+ }
+
+
- {cards.map((card) => (
+ {showCards.map((card) => (
{
diff --git a/src/components/setting/AsideSection.tsx b/src/components/setting/AsideSection.tsx
new file mode 100644
index 0000000..d0bfdad
--- /dev/null
+++ b/src/components/setting/AsideSection.tsx
@@ -0,0 +1,54 @@
+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 (
+ (null);
+ const accountDropdownRef = useRef(null);
+
+ const [createFormData, setCreateFormData] = useState<{ accountName: string }>({
+ accountName: '',
+ });
+
+ const [accountSearchTerm, setAccountSearchTerm] = useState('');
+ const [selectedAccount, setSelectedAccount] = useState(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) => {
+ 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) => {
+ setTimeout(() => {
+ const activeElement = document.activeElement as HTMLElement;
+ if (accountDropdownRef.current && !accountDropdownRef.current.contains(activeElement)) {
+ setIsAccountDropdownOpen(false);
+ }
+ }, 100);
+ };
+
+ const handleAccountSearchChange = (e: React.ChangeEvent) => {
+ 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 (
+ = ({ userData }) => {
+ return (
+ (null);
+
+ const [activeTab, setActiveTab] = useState("userProfile");
+ const [activeSubSection, setActiveSubSection] = useState("");
+ const [user, setUser] = useState({
+ id: "",
+ firstName: "",
+ lastName: "",
+ email: "",
+ language: "",
+ account: {
+ id: 0,
+ isDefault: false,
+ name: "",
+ },
+ });
+
+ const [createAndInviteLoader, setCreateAndInviteLoader] = useState(false);
+
+ // Dropdown data states
+ const [accountOptions, setAccountOptions] = useState([]);
+ 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) => {
switch (activeTab) {
case "userProfile":
- return
+
+ );
+};
+
+export default AsideSection;
\ No newline at end of file
diff --git a/src/components/setting/CreateAndInvite.tsx b/src/components/setting/CreateAndInvite.tsx
new file mode 100644
index 0000000..c8d8f13
--- /dev/null
+++ b/src/components/setting/CreateAndInvite.tsx
@@ -0,0 +1,342 @@
+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
+
+
+
+ {mainTabTitle}
+Navigate through sections
+
+ {/* Create Section */}
+
+
+
+ {/* Invite Section */}
+
+
+
+ );
+};
+
+export default CreateAndInvite;
\ No newline at end of file
diff --git a/src/components/setting/Language.tsx b/src/components/setting/Language.tsx
new file mode 100644
index 0000000..ea5c4c4
--- /dev/null
+++ b/src/components/setting/Language.tsx
@@ -0,0 +1,38 @@
+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.FCCreate Account
+
+
+
+
+ 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)]"
+ />
+
+
+ {errors.accountName && (
+ {errors.accountName}
+ )}
+ Invite
+
+ {/* Account Name Dropdown */}
+
+
+
+
+
+
+ {/* Email */}
+
+
+
+ {/* Loading indicator */}
+ {accountOptionsLoading && (
+
+
+ {errors.i_accountName && (
+ {errors.i_accountName}
+ )}
+
+
+ )}
+
+ {/* Account Dropdown */}
+ {isAccountDropdownOpen && !accountOptionsLoading && (
+
+
+ )}
+ -
+ {filteredAccountOptions.length > 0 ? (
+ filteredAccountOptions.map((option) => (
+
- handleAccountSelect(option)}
+ className="px-3 py-2 text-[13px] text-gray-600 hover:bg-gray-100 cursor-pointer"
+ >
+ + {option.accountName} ++
+ ))
+ ) : (
+
- No results found + )} +
+
+ 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 && (
+ {errors.email}
+ )}
+
+
+ {/* Role Dropdown */}
+
+
+
+
+
+
+ {errors.role && (
+ {errors.role}
+ )}
+
+ {roles.map((role) => (
+
+ handleRoleSelect(role)}
+ className="px-4 py-1 text-[13px] hover:bg-gray-100 cursor-pointer"
+ >
+ {role}
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+export default Language
\ No newline at end of file
diff --git a/src/components/setting/Setting.tsx b/src/components/setting/Setting.tsx
index 05e9167..27c551e 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -1,67 +1,387 @@
-import { useState } from "react";
+import { useEffect, useState, useRef } from "react";
import SettingNav from "./SettingNav";
-import { useParams } from "react-router-dom";
+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";
+
+// Define the shape of state object
+interface Account {
+ id: number;
+ isDefault: boolean;
+ name: string;
+}
+
+interface UserData {
+ id: string;
+ firstName: string;
+ lastName: 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;
+}
const Setting = () => {
const { page1 } = useParams<{ page1: string }>();
- const renderContent = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+
+ // Refs for subsections within each main tab
+ const subSectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+ const scrollContainerRef = useRef
+
+ {/* Language */}
+
+
+ Language
+ {userData.language}
+
+
+
+ User Profile content goes here...
;
- case "language":
- return Language settings content goes here...
;
- case "contactAll":
- return All Contacts content goes here...
;
- case "contactAdd":
- return Add Contact form goes here...
;
- case "contactRemove":
- return Remove Contact UI goes here...
;
- case "contactShare":
- return Share Contact options go here...
;
+ switch (subSectionId) {
+ case "profile-info":
+ return Coming Soon...
;
+ return (
+
+
+ );
}
};
+ const renderContent = () => {
+ const currentSubSections = getSubSections(activeTab);
+
+ if (currentSubSections.length === 0) {
+ // If no subsections, render the main content directly
+ switch (activeTab) {
+ case "userProfile":
+ return Coming Soon
+This section is under development.
+Coming Soon...
;
+ }
+ }
+
+ return (
+
+ {currentSubSections.map((subSection) => (
+
+ );
+ };
+
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" },
];
- const [activeTab, setActiveTab] = useState("userProfile");
+ const getUserDetails = async () => {
+ try {
+ let res = await api.get(`/api/user/details`)
+ console.log("getuser", res)
+ setUser(res?.data)
+ } catch (error) {
+ console.error("Error fetching user details:", error);
+ }
+ }
+
+ useEffect(() => {
+ getUserDetails()
+ // Fetch account list when component mounts
+ getAccountList()
+ }, [])
+
+ // Set initial subsection when component mounts or activeTab changes
+ useEffect(() => {
+ const subSections = getSubSections(activeTab);
+ 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)
+ }
+ };
return (
<>
(subSectionRefs.current[subSection.id] = el)}
+ id={subSection.id} // This creates the anchor for hash navigation
+ className="scroll-mt-6"
+ >
+ {renderSubSectionContent(subSection.id)}
+
+ ))}
+
- {/* Top Nav Tabs */}
- ;
+ 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 = ({
+ setShowAddSignature,
+ getAllSignatures,
+ editingSignature
+}) => {
+ const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
+ const [fullName, setFullName] = useState('');
+ const [initials, setInitials] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(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(
+ signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
+ );
+
+ // Store the actual file
+ const [file1, setFile1] = useState(null);
+ const [file2, setFile2] = useState(null);
+
+ // Store the preview URL
+ const [preview1, setPreview1] = useState(null);
+ const [preview2, setPreview2] = useState(null);
+
+ // User data
+ const [user, setUser] = useState({
+ id: "",
+ firstName: "",
+ lastName: "",
+ email: "",
+ language: "",
+ account: {
+ id: 0,
+ isDefault: false,
+ name: "",
+ },
+ });
+
+ const isEditMode = !!editingSignature;
+
+ // Navigation items
+ const navigationItems = [
+ { id: 'SELECT', label: 'SELECT', icon: ,
+ setFile: React.Dispatch>,
+ setPreview: React.Dispatch>,
+ 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 => {
+ 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 'SELECT':
+ return (
+ = ({ onSignatureChange, initialSignatures }) => {
+ const canvasRef1 = useRef(null);
+ const canvasRef2 = useRef(null);
+ const [isDrawing, setIsDrawing] = useState(false);
+ const [paths1, setPaths1] = useState>>([]);
+ const [paths2, setPaths2] = useState>>([]);
+ const [currentPath, setCurrentPath] = useState>([]);
+ const [activeCanvas, setActiveCanvas] = useState<'full' | 'initials' | null>(null);
+ const [initialLoaded, setInitialLoaded] = useState(false);
+
+ // Store initial signature images to avoid reloading
+ const [initialImage1, setInitialImage1] = useState(null);
+ const [initialImage2, setInitialImage2] = useState(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) => {
+ 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) => {
+ 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>, 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 (
+ (false)
+ const [signatures, setSignatures] = useState([]);
+ const [activeDropdown, setActiveDropdown] = useState(null);
+ const [showAddSignature, setShowAddSignature] = useState(false);
+ const [editingSignature, setEditingSignature] = useState(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 ?
+
diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx
new file mode 100644
index 0000000..86c2fbb
--- /dev/null
+++ b/src/components/setting/Signature/AddSignatureModal.tsx
@@ -0,0 +1,529 @@
+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
+ {/* Main Navigation Tabs */}
+
- {/* Main Content Area */}
-
-
)
}
diff --git a/src/components/setting/SettingNav.tsx b/src/components/setting/SettingNav.tsx
index 4eda089..a2da0fb 100644
--- a/src/components/setting/SettingNav.tsx
+++ b/src/components/setting/SettingNav.tsx
@@ -34,11 +34,12 @@ const SettingNav = () => {
- {tabs.map((tab) => (
- tab.type === page1 &&
- ))}
+ {tabs.map((tab) =>
+ tab.type === page1 && (
+
+ )
+ )}
{renderContent()}
+ {/* Content with Aside Navigation */}
+
+ {/* Fixed Aside Navigation - Shows subsections of active tab */}
+ {activeTab === 'userProfile' &&
+
+
+ }
+ {/* Scrollable Main Content */}
+
+ t.id === activeTab)?.label || ""}
+ />
+
+
+ {renderContent()}
+
+
+
+ );
+
+ case 'DRAW':
+ return (
+
+
+
+ Choose Signature Style
+Select from pre-designed signature styles
+
+
+
+ {signatureOptions.map((option) => (
+
+
+ setSelectedSignature({ id: option.id, style: option.style })}
+ className="w-4 h-4 text-blue-600 focus:ring-blue-500"
+ />
+
+ ))}
+
+
+
+
+ Signed by:
+
+ {fullName || option.name}
+
+
+ dca3e646-62cd-4cc...
+
+
+
+ DS
+
+ {initials || option.initials}
+
+
+
+ );
+
+ 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 (
+
+
+ Upload Signature
+
+
+
+
+
+ {/* Upload 1 */}
+
+
+
+
+ handleImageChange(e, setFile1, setPreview1, "fullSignature")}
+ />
+
+
+ {/* Upload 2 */}
+
+
+
+ handleImageChange(e, setFile2, setPreview2, "initials")}
+ />
+
+
+
+ );
+};
+
+export default AddSignatureModal;
\ No newline at end of file
diff --git a/src/components/setting/Signature/DrawSignatureCanvas.tsx b/src/components/setting/Signature/DrawSignatureCanvas.tsx
new file mode 100644
index 0000000..250218e
--- /dev/null
+++ b/src/components/setting/Signature/DrawSignatureCanvas.tsx
@@ -0,0 +1,286 @@
+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
+
+ {/* Sidebar Navigation */}
+
+
+ {/* Header */}
+
+
+ {/* Main Content Area */}
+
+
+
+ {/* Form Inputs */}
+
+
+
+
+ Add Signature
+Create your digital signature
+
+
+
+ {/* Navigation Menu */}
+
+
+
+
+ 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"
+ />
+
+
+
+
+ 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"
+ />
+
+
+
+
+
+
+ {/* Header with close button */}
+
+ {/* Content */}
+
+
+ {/* */}
+ {renderContent()}
+
+
+ {/* Footer Buttons in Main Area */}
+
+
+
+
+
+
+
+ );
+};
+
+export default DrawSignatureCanvas;
\ No newline at end of file
diff --git a/src/components/setting/Signature/Signature.tsx b/src/components/setting/Signature/Signature.tsx
new file mode 100644
index 0000000..58244b7
--- /dev/null
+++ b/src/components/setting/Signature/Signature.tsx
@@ -0,0 +1,260 @@
+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
+}
+
+const SignatureManager: React.FC = () => {
+ const [loading, setLoading] = useState
+
+
+ Draw Signature
+Create your signature by drawing directly on the canvas
+
+
+
+ {/* Full Signature Canvas */}
+
+
+ {/* Controls */}
+
+
+
+
+ {/* Initials Canvas */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:
+
+
+
+
+ Loading...
+
+ = ({ userData }) => {
+ const getInitials = (firstName: string, lastName: string) => {
+ return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+ };
+ return (
+
+ <>
+ {/* Header */}
+
+
+ {/* Click outside to close dropdown */}
+ {activeDropdown && (
+
+
+
+ {/* Table Card */}
+
+
+
+ Signatures
+Add or update your name and signature styles.
+
+ {/* Table Header */}
+
+
+ {/* Empty State (if no signatures) */}
+ {signatures.length === 0 && (
+
+
+
+ {/* Table Body */}
+
+
+
+
+ Signature
+
+
+ Initial
+
+
+ Actions
+
+ {signatures.map((signature, index) => (
+
+
+ {/* Signature Column */}
+
+ ))}
+
+
+
+ {/* Initial Column */}
+
+ {/* Label */}
+
+
+ Signed by:
+
+
+ {/* Signature Image */}
+
+ 
+
+
+ {/* Signature ID */}
+
+ {signature.signatureHash}
+
+
+
+
+ {/* Actions Column */}
+
+ {/* Label */}
+
+
+ DS
+
+
+ {/* Signature Image */}
+
+ 
+
+
+
+
+
+
+ {/* Dropdown Menu */}
+ {activeDropdown === signature.id && (
+
+
+
+
+
+ )}
+
+
+ )}
+
+
+
+ No signatures yet
+Create your first signature to get started.
+ setActiveDropdown(null)}
+ />
+ )}
+
+ {showAddSignature && (
+
+ }
+ );
+};
+
+export default SignatureManager;
\ No newline at end of file
diff --git a/src/components/setting/UserProfile.tsx b/src/components/setting/UserProfile.tsx
new file mode 100644
index 0000000..ce58abd
--- /dev/null
+++ b/src/components/setting/UserProfile.tsx
@@ -0,0 +1,63 @@
+import { FiX, FiEdit2 } from 'react-icons/fi';
+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 UserProfile: React.FC
+ {/* Profile Picture */}
+
+
+
+ );
+};
+
+export default UserProfile
\ No newline at end of file
diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx
index 3251f7d..9f1bbe3 100644
--- a/src/components/transactions/TransactionView.tsx
+++ b/src/components/transactions/TransactionView.tsx
@@ -1,9 +1,12 @@
import { AiFillSignature } from 'react-icons/ai';
-import { useParams } from 'react-router-dom';
+import { Link, 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 = [
@@ -27,6 +30,8 @@ const recipients = [
const TransactionView = () => {
const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
+ console.log("account" , accountId , transactionId)
+
if (!accountId || !transactionId) {
window.location.href = "/";
@@ -34,6 +39,8 @@ const TransactionView = () => {
}
const [transactionDetails, setTransactionDetails] = useState(null);
+ const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
+ console.log(transactionDetails, "line 37");
const fetchData = async () => {
try {
@@ -57,7 +64,7 @@ const TransactionView = () => {
+
+
+ {/* Info Fields */}
+
+ {getInitials(userData.firstName, userData.lastName)}
+
+
+ {/* Row: Name */}
+
+
+
+
+ {/* Row: Email */}
+ Name
+
+ {userData.firstName} {userData.lastName}
+
+
+
+
+ {/* Row: Account Name */}
+ Email
+ {userData.email}
+
+
+ Account name
+
+ {userData.account.name}
+
+
{/* Header */}
{/* Recipients Section */} + {transactionDetails.recipients.length > 0 &&
))}
+ }
+
+ {signingOrderModal.open &&
+ - Complete with Forms Made Easy: {transactionDetails.transaction.name ? transactionDetails.transaction.name : "Untitled"} + Complete with Forms Made Easy: { transactionDetails.transaction.name ?? "Untitled"}
@@ -77,18 +84,23 @@ const TransactionView = () => {
>
Sign
*/}
-
{/* Recipients Section */} + {transactionDetails.recipients.length > 0 &&
Signers
-+
setSigningOrderModal({ ...signingOrderModal, open: true })}>
@@ -137,7 +150,11 @@ const TransactionView = () => {
@@ -146,6 +163,24 @@ const TransactionView = () => {
-
1 of 10
+
+ 1 of 10
+
+
+ }
}
diff --git a/src/index.css b/src/index.css
index c2230cb..3b6b216 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,6 +43,9 @@
--hideModalBg: #2d2d2d;
--processStepOneTextHead: #000000;
+
+ --modalSubmitBG:#1919d7;
+ --modalSubmitBGHover:#395ee1;
}
@@ -74,3 +77,15 @@ 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 */
+ }
+ }
\ No newline at end of file
+
+
+
+
+ Signing Order
+ setSigningOrderModal({ ...signingOrderModal, open: false })}
+ className="text-xl cursor-pointer hover:text-gray-200 transition-all">
+
+