+
{/* Single mail icon on top */}
@@ -85,7 +85,7 @@ const SigningOrderDiagram : React.FC = (signers) => {
-
+
{sortedOrders.map((order, index) => (
diff --git a/src/components/accounts/AccountNav.tsx b/src/components/accounts/AccountNav.tsx
index 4d2b338..837322f 100644
--- a/src/components/accounts/AccountNav.tsx
+++ b/src/components/accounts/AccountNav.tsx
@@ -1,6 +1,6 @@
import React, { use, useEffect } from 'react';
import { useSelector } from 'react-redux';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
import { FaCog } from 'react-icons/fa';
import { IoIosNotifications } from 'react-icons/io';
import { RootState } from '../../store/store';
@@ -60,14 +60,48 @@ const AccountNav: React.FC = ({ accountName = null, transaction
// }
// }, [accountId, transactionId]);
+ const location = useLocation();
+
+ const pathnames = location.pathname
+ .split("/")
+ .filter((x) => x && isNaN(Number(x))); // remove numeric IDs
+
+ const labelMap = {
+ accounts: "Accounts",
+ transactions: "Transactions",
+ // Add more routes here if needed
+ };
+
+
return (
- = ({ accountName = null, transaction
diff --git a/src/components/home/HomeTopNav.tsx b/src/components/home/HomeTopNav.tsx
index cac86b9..8cd21e3 100644
--- a/src/components/home/HomeTopNav.tsx
+++ b/src/components/home/HomeTopNav.tsx
@@ -33,7 +33,7 @@ const HomeTopNav = () => {
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 [createFormData, setCreateFormData] = useState<{ accountName: string }>({
+ accountName: '',
+ });
+
+ const [inviteFormData, setInviteFormData] = useState<{
+ i_accountName: string;
+ email: string;
+ role: string;
+ }>({
+ i_accountName: '',
+ email: '',
+ role: '',
+ });
+
+ const [errors, setErrors] = useState<{ [key: string]: string }>({});
+
+ const roles = ['Owner', 'Client'];
+
+ const handleFocus = () => setIsOpen(true);
+
+ const handleBlur = (e: React.FocusEvent) => {
+ setTimeout(() => {
+ const activeElement = document.activeElement as HTMLElement;
+ if (dropdownRef.current && !dropdownRef.current.contains(activeElement)) {
+ setIsOpen(false);
+ }
+ }, 100);
+ };
+
+ const handleSelect = (role: string) => {
+ setInviteFormData((prev) => ({ ...prev, role }));
+ setIsOpen(false);
+ };
+
+ const handleCreateChange = (value: string) => {
+ setCreateFormData({ accountName: value });
+ };
+
+ const handleInviteChange = (
+ field: keyof typeof inviteFormData,
+ value: string
+ ) => {
+ setInviteFormData((prev) => ({ ...prev, [field]: value }));
+ };
+
+ const handleCreateSubmit = () => {
+ if (!createFormData.accountName.trim()) {
+ setErrors({ accountName: 'Account name is required' });
+ return;
+ }
+ setErrors({});
+ onSubmit(createFormData, 'create');
+ };
+
+ const handleInviteSubmit = () => {
+ const { i_accountName, email, role } = inviteFormData;
+ const errs: { [key: string]: string } = {};
+
+ if (!i_accountName.trim()) 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');
+ };
+
+ 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: "",
+ },
+ });
+
+ // 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" },
+ ];
+ // case "create and invite":
+ // return [
+ // { id: "create-account", label: "Create Account" },
+ // { id: "invite-users", label: "Invite Users" },
+ // { id: "manage-invitations", label: "Manage Invitations" }
+ // ];
+ // return [
+ // { id: "share-options", label: "Share Options" },
+ // { id: "privacy-settings", label: "Privacy Settings" }
+ // ];
+ 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]);
+
+ // Render subsection content based on active tab and subsection
+ const renderSubSectionContent = (subSectionId: string) => {
switch (activeTab) {
case "userProfile":
- return
- Account - {accountName ? ` > ${accountName}` : ''} - {transactionName ? ` > ${transactionName}` : ''} -
+ {/*Account
*/} @@ -82,7 +116,7 @@ const AccountNav: React.FC
+
+ );
+};
+
+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..3cc87d7
--- /dev/null
+++ b/src/components/setting/CreateAndInvite.tsx
@@ -0,0 +1,216 @@
+import React, { useRef, useState } from 'react';
+
+export type ActionType = 'create' | 'invite';
+
+type CreateData = { accountName: string };
+type InviteData = { i_accountName: string; email: string; role: string };
+
+type FormDataType = CreateData | InviteData;
+
+interface Props {
+ onSubmit: (data: FormDataType, action: ActionType) => void;
+}
+
+const CreateAndInvite = ({ onSubmit }: Props) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const dropdownRef = useRef
+
+
+
+ {mainTabTitle}
+Navigate through sections
+
+ {/* Create */}
+
+
+
+ {/* Invite */}
+
+
+
+ );
+};
+
+export default CreateAndInvite;
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 */}
+
+
+
+
+ handleInviteChange('i_accountName', 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.i_accountName && (
+ {errors.i_accountName}
+ )}
+
+
+ {/* Email */}
+
+
+ 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 */}
+
+
+
+
+
+
+
+ {roles.map((r) => (
+
+ {errors.role && (
+ {errors.role}
+ )}
+ handleSelect(r)}
+ className="px-4 py-2 text-[13px] hover:bg-gray-100 cursor-pointer"
+ >
+ {r}
+
+ ))}
+
+
+
+
+
+
+ )
+}
+
+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..a658c73 100644
--- a/src/components/setting/Setting.tsx
+++ b/src/components/setting/Setting.tsx
@@ -1,67 +1,321 @@
-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";
+
+// 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;
+}
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()
+ }, [])
+
+ // 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) => {
+ try {
+ if (action === 'create') {
+ console.log('Creating account:', data);
+ } else if (action === 'invite') {
+ console.log('Inviting user:', data);
+ }
+ } catch (err) {
+ console.error('Submission error:', err);
+ }
+ };
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 */}
-
+ = ({ setShowAddSignature }) => {
+ const [activeTab, setActiveTab] = useState<'choose' | 'draw' | 'upload'>('choose');
+ const [fullName, setFullName] = useState('');
+ const [initials, setInitials] = useState('');
+
+ // Sample signature options for the CHOOSE tab
+ 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(1);
+
+ // 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
+ const [user, setUser] = useState({
+ id: "",
+ firstName: "",
+ lastName: "",
+ email: "",
+ language: "",
+ account: {
+ id: 0,
+ isDefault: false,
+ name: "",
+ },
+ });
+
+ // Navigation items
+ const navigationItems = [
+ { id: 'choose', label: 'Choose', icon: ,
+ setFile: React.Dispatch>,
+ setPreview: React.Dispatch>
+ ) => {
+ const file = e.target.files?.[0];
+ if (file) {
+ setFile(file);
+ const previewUrl = URL.createObjectURL(file);
+ setPreview(previewUrl);
+ }
+ };
+
+
+ const renderContent = () => {
+ switch (activeTab) {
+ case 'choose':
+ return (
+ ([
+ {
+ id: '1',
+ signature: 'https://www.signwell.com/assets/vip-signatures/muhammad-ali-signature-3f9237f6fc48c3a04ba083117948e16ee7968aae521ae4ccebdfb8f22596ad22.svg',
+ initial: 'AB',
+ createdAt: 'dca3e646-62cd-4cc...'
+ },
+ {
+ id: '2',
+ signature: '∼∼⌒∼∼⌒∼',
+ initial: 'AB',
+ createdAt: 'dca3e646-62cd-4cc...'
+ },
+ {
+ id: '3',
+ signature: 'Digital Signature',
+ initial: 'DS',
+ createdAt: 'dca3e646-62cd-4cc...'
+ }
+ ]);
+
+ const [activeDropdown, setActiveDropdown] = useState(null);
+ const [showAddSignature , setShowAddSignature] = useState(false)
+
+ const handleEdit = (id: string) => {
+ console.log('Edit signature:', id);
+ setActiveDropdown(null);
+ };
+
+ const handleDelete = (id: string) => {
+ setSignatures(signatures.filter(sig => sig.id !== id));
+ setActiveDropdown(null);
+ };
+
+ const toggleDropdown = (id: string) => {
+ setActiveDropdown(activeDropdown === id ? null : id);
+ };
+
+ return (
+
+ {/* Main Navigation Tabs */}
+
- {/* Main Content Area */}
-
-
)
}
diff --git a/src/components/setting/SettingNav.tsx b/src/components/setting/SettingNav.tsx
index 4eda089..38e1397 100644
--- a/src/components/setting/SettingNav.tsx
+++ b/src/components/setting/SettingNav.tsx
@@ -34,7 +34,7 @@ const SettingNav = () => {
diff --git a/src/components/setting/Signature/AddSignatureModal.tsx b/src/components/setting/Signature/AddSignatureModal.tsx
new file mode 100644
index 0000000..a6ef255
--- /dev/null
+++ b/src/components/setting/Signature/AddSignatureModal.tsx
@@ -0,0 +1,382 @@
+import React, { useEffect, useState } from 'react';
+// import { X, Upload, Edit3, Image, Cloud, HardDrive, Droplets } from 'lucide-react';
+import { AiOutlineClose, AiOutlineUpload, AiOutlineEdit } from 'react-icons/ai';
+import { MdImage, MdCloudUpload, MdStorage } from 'react-icons/md';
+import api from '../../../config/api';
+
+
+interface AddSignatureModalProps {
+ setShowAddSignature?: (value: boolean) => void;
+}
+interface Account {
+ id: number;
+ isDefault: boolean;
+ name: string;
+}
+
+interface UserData {
+ id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ language: string;
+ account: Account;
+}
+
+const AddSignatureModal: React.FC
- {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(option.id)}
+ className="w-4 h-4 text-blue-600 focus:ring-blue-500"
+ />
+
+ ))}
+
+
+
+
+ Signed by:
+
+ {fullName || option.name}
+
+
+ dca3e646-62cd-4cc...
+
+
+
+ DS
+
+ {initials || option.initials}
+
+
+
+ );
+
+ case 'upload':
+ return (
+
+
+
+ Draw Signature
+Create your signature by drawing directly on the canvas
+
+
+
+ {/* Draw area 1 */}
+
+
+
+
+
+ {/* Draw area 2 */}
+
+
+
+ {/*
+ Click and drag to draw your signature
+Use mouse or touch to create your signature
+
+
+
+
+
+
+ {/*
+ Draw initials
+
+
+
+
+
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ 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()
+ }, [])
+
+ return (
+
+
+ Upload Signature
+
+
+
+
+
+ {/* Upload 1 */}
+
+
+
+
+ handleImageChange(e, setFile1, setPreview1)}
+ />
+
+
+ {/* Upload 2 */}
+
+
+
+ handleImageChange(e, setFile2, setPreview2)}
+ />
+
+
+
+ );
+};
+
+export default AddSignatureModal;
\ 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..2d3aafe
--- /dev/null
+++ b/src/components/setting/Signature/Signature.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react';
+import { FiEdit3, FiTrash2, FiPlus, FiMoreVertical } from 'react-icons/fi';
+import AddSignatureModal from './AddSignatureModal';
+
+interface Signature {
+ id: string;
+ signature: string;
+ initial: string;
+ createdAt: string;
+}
+
+const SignatureManager: React.FC = () => {
+ const [signatures, setSignatures] = useState
+
+ {/* 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 */}
+
+
+
+
+
+
+ = ({ 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.createdAt}
+
+
+
+
+
+ {/* 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..06eb6eb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -74,3 +74,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">
+
+