+ {/* Single mail icon on top */}
+
+ );
+};
+
+export default SigningOrderDiagram;
diff --git a/src/assets/react.svg b/src/assets/react.svg
new file mode 100644
index 0000000..f1e948d
--- /dev/null
+++ b/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/AccountTransactionWrapper.tsx b/src/components/AccountTransactionWrapper.tsx
new file mode 100644
index 0000000..7d558d5
--- /dev/null
+++ b/src/components/AccountTransactionWrapper.tsx
@@ -0,0 +1,16 @@
+
+import { Outlet } from 'react-router-dom'
+import AccountNav from './accounts/AccountNav'
+
+const AccountTransactionWrapper = () => {
+
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ {/* Transaction Sent
*/} +
+
+
+
+
+ {sortedOrders.map((order, index) => (
+
+
+ ))}
+
+
+
+
+ {index < sortedOrders.length - 1 && (
+
+ {grouped[order].map((signer) => {
+ let bgColor = "";
+ let icon = null;
+
+ if (signer.completed) {
+ bgColor = "bg-green-500";
+ icon =
+
+
+ );
+ })}
+
+ {getInitials(signer.name)}
+
+ {icon}
+
+
+ {signer.name.split(" ")[0]}
+
+
+
+ )}
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Account;
diff --git a/src/components/accounts/AccountNav.tsx b/src/components/accounts/AccountNav.tsx
new file mode 100644
index 0000000..4d2b338
--- /dev/null
+++ b/src/components/accounts/AccountNav.tsx
@@ -0,0 +1,110 @@
+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;
+}
+
+const AccountNav: React.FC| + | Name | +Status | +Active | +Last Change | +Expire After (days) | ++ |
|---|---|---|---|---|---|---|
|
+
+ {selectedTransactions.includes(tx.id) && (
+
+ |
+ + {tx.subject || "Untitled"} + | ++ + {tx.status} + + | ++ {tx.active ? "Yes" : "No"} + | + ++ {formatDate(tx.lastModifiedAt)} + | ++ {tx.expireAfter ?? "-"} + | +
+ |
+
+ Account + {accountName ? ` > ${accountName}` : ''} + {transactionName ? ` > ${transactionName}` : ''} +
+ + {/*Account
*/} + +
+ {/* Notification + Settings with smaller gap */}
+
+
+
+
+
+
+
+ {/* Avatar with separate spacing */}
+
+ {user.picture ? (
+ 
+ ) : (
+ initials
+ )}
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default Accounts;
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..bb4bb4a
--- /dev/null
+++ b/src/components/auth/LoginForm.tsx
@@ -0,0 +1,219 @@
+// import OAuthGoogle from "./OAuthGoogle";
+import axios from "axios";
+import { useState } from "react";
+// import { FcGoogle } from "react-icons/fc";
+import { Link, useNavigate } from "react-router-dom";
+import OAuthGoogle from "./OAuthGoogle";
+import { Bounce, toast } from "react-toastify";
+// import Cookies from "js-cookie";
+import { updateUser } from "../../store/slices/userSlice";
+import { useDispatch } from "react-redux";
+import { AppDispatch } from "../../store/store";
+// import api from "../../config/api";
+
+interface FormDataState {
+ email: string;
+ password: string;
+}
+
+
+function LoginForm() {
+ const [formData, setForm] = useState| */} + | Account Name | +Account ID | +Role | +Status | ++ |
|---|---|---|---|---|---|
|
+
+ {selectedAccounts.includes(account.accountId) && (
+
+ | */}
+
+
+
+ |
+ {account.accountId} | ++ + {account.role} + + | ++ + {status.text} + + | +
+ |
+
+
+ )
+}
+
+export default LoginForm
diff --git a/src/components/auth/OAuthGoogle.tsx b/src/components/auth/OAuthGoogle.tsx
new file mode 100644
index 0000000..9d2de8b
--- /dev/null
+++ b/src/components/auth/OAuthGoogle.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { GoogleLogin } from '@react-oauth/google';
+import { jwtDecode } from "jwt-decode";
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { useDispatch } from 'react-redux';
+import { AppDispatch } from '../../store/store';
+import { updateUser } from '../../store/slices/userSlice';
+import { useNavigate } from 'react-router-dom';
+// import api from '../../config/api';
+
+// Define a basic type for the response object
+interface GoogleResponse {
+ credential: string; // This is usually the JWT token
+}
+
+interface OAuthGoogleProps {
+ isLogin: boolean
+}
+
+const OAuthGoogle: React.FCLogin
+ + + + + + + +or login with social platforms
+ +
+
+
+
+
+ Create an Account. Register
+
+
+
+
+ )
+}
+
+export default RegisterForm
diff --git a/src/components/auth/UsertAuthUI.tsx b/src/components/auth/UsertAuthUI.tsx
new file mode 100644
index 0000000..12693ff
--- /dev/null
+++ b/src/components/auth/UsertAuthUI.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+import "../styles/style.css"
+import { useNavigate } from "react-router-dom";
+import LoginForm from "./LoginForm";
+import RegisterForm from "./RegisterForm";
+import { useDispatch } from "react-redux";
+import { AppDispatch } from "../../store/store";
+import { fetchUserDetails } from "../../store/slices/userSlice";
+
+function UserAuthUI({ pg }: { pg: string }) {
+ const navigate = useNavigate();
+
+ useLayoutEffect(() => {
+ dispatch(fetchUserDetails());
+ }, []);
+
+ const dispatch = useDispatch
+
+ Already! have an Account. Login
+
+
+
+ )
+}
+
+export default UserAuthUI
diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx
new file mode 100644
index 0000000..42710a6
--- /dev/null
+++ b/src/components/client/SignDocument.tsx
@@ -0,0 +1,1011 @@
+import { useEffect, useState } from "react";
+
+import axios from "axios"
+import { RootState } from "../../store/store";
+import { useParams } from "react-router-dom"
+import { DroppedItem } from "../../utlity/types";
+
+import Loader from "../dashboard/Loader";
+import SignCon from "../signature/SignCon";
+import { Bounce, toast } from "react-toastify";
+import { useDispatch, useSelector } from "react-redux";
+import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
+
+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";
+import { BsFileArrowDownFill } from "react-icons/bs";
+import dayjs from "dayjs";
+import maskUtils from "../../utlity/maskUtils";
+import StampUpload from "../stamp/StampUpload";
+import TermsModal from "./TermsModal";
+
+
+
+interface RecipientType {
+ id: string;
+ firstName: string | null;
+ lastName: string;
+ fullName: string | null;
+ email: string;
+ title: string | null;
+ initials: string | null;
+ company: string | null;
+ website: string | null;
+ phone: string | null;
+ index: number;
+ type: string;
+ recipientStatus: string;
+ authType: string | null;
+ language: string | null;
+ transaction: string | null;
+ acceptedTerms: boolean;
+ name: string | null;
+}
+interface ImagesType {
+ index: number;
+ type: string;
+ src: string;
+ height: number;
+ width: number;
+}
+interface DocumentType {
+ documentId: string;
+ images: ImagesType[];
+ name: string;
+}
+
+interface TransactionType {
+ status: string;
+ transationId: string;
+}
+interface TagSubmitData {
+ id: string;
+ type?: string;
+ subType: string;
+ signed: boolean;
+ value: string;
+}
+interface TagSubmitRecData {
+ recipientId: string;
+}
+export enum SaveTypeEnum {
+ DRAW = "DRAW",
+ TYPE = "TEXT",
+ UPLOAD = "IMAGE",
+}
+export interface SaveType {
+ saveType: SaveTypeEnum | null;
+ save: boolean;
+ signature: string | null;
+ initial: string | null;
+}
+interface TagsSubmitDataObj {
+ tags: TagSubmitData[];
+ recipient?: TagSubmitRecData
+}
+
+interface SignConfType {
+ accepted: boolean;
+ index: number;
+}
+
+interface SignConfTypeObj {
+ [key: number]: SignConfType;
+}
+
+export interface StampTypeObj {
+ open: boolean;
+ blob: string;
+}
+
+// Functions - LIST
+// handleSignClick - Handle when sign || Initial tag got clicked
+// fetchData - Fetch document images and tags data
+// handleFormSubmit - handle form submit and send data to server
+
+const SignDocument = () => {
+ const { recipientId } = useParams();
+ const dispatch = useDispatch();
+
+ // Signer data - START
+ const [selectedDocuments, setSelectedDocuments] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+ Sign Made Easy
+Don't have an account?
+ +
+
+ Welcome Back!
+Already have an account?
+ +
+ <>
+ {/*
+ )
+}
+
+export default SignDocument
diff --git a/src/components/client/TermsModal.tsx b/src/components/client/TermsModal.tsx
new file mode 100644
index 0000000..2ee8292
--- /dev/null
+++ b/src/components/client/TermsModal.tsx
@@ -0,0 +1,88 @@
+import axios from 'axios';
+import React from 'react';
+import { AiOutlineCheck, AiOutlineCloseCircle } from 'react-icons/ai';
+import { FaRegFileAlt } from 'react-icons/fa';
+
+interface TermsModalProps {
+ showTerms: boolean;
+ setShowTerms: React.Dispatch
+
+
+
+
+
+
+ {/*
+
+ );
+};
+
+export default TermsModal;
diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
new file mode 100644
index 0000000..73194a5
--- /dev/null
+++ b/src/components/dashboard/Dashboard.tsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useLayoutEffect } from 'react'
+import SideBar from './SideBar'
+import { Outlet, useNavigate } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../store/store'
+import { UserState } from '../../store/slices/userSlice'
+import Loader from './Loader'
+
+import { clearTransaction, TRANSACTION_STATUS_ENUMS } from '../../store/slices/transactionSlice'
+import { resetSelDoc } from '../../store/slices/selectedDocsSlice'
+import { resetSelRecipient } from '../../store/slices/selectedRecipientsSlice'
+import { hideLoader, showLoader } from '../../store/slices/loaderSlice'
+import { Bounce, toast } from 'react-toastify'
+import SignModal from '../modal/SignModal'
+
+import confetti from 'canvas-confetti'
+import { useWindowSize } from 'react-use'
+import { FaCheckCircle } from 'react-icons/fa'
+import { IoClose } from 'react-icons/io5'
+
+function Dashboard() {
+ const [showSideBar, setShowSideBar] = React.useState(true)
+ const [showConfetti, setShowConfetti] = React.useState(false)
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+
+ const user: UserState = useSelector((state: RootState) => state.user);
+
+ const globalLoader = useSelector((state: RootState) => state.loader)
+ const globalModalIsOpen = useSelector((state: RootState) => state.modal.isOpen)
+
+ const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments)
+ const documentSignType = useSelector((state: RootState) => state.selectedDocuments.signType)
+
+ const transactionStatus = useSelector((state: RootState) => state.transaction.status)
+
+ // Check if cookie already exists - Redirect to Dashboard
+ useLayoutEffect(() => {
+ // if (!user.authorized) {
+ // window.location.href = '/login';
+ // return;
+ // }
+ console.log("OUT MIC CHECK", transactionStatus, TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS, TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED);
+
+ // Clear all if transaction success
+ if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {
+ console.log("IN MIC CHECK");
+ dispatch(resetSelDoc())
+ dispatch(resetSelRecipient())
+ dispatch(clearTransaction())
+
+ if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS) {
+ setShowConfetti(true)
+ // setTimeout(() => {
+ // setShowConfetti(false)
+ // dispatch(hideLoader())
+ // toast.dismiss();
+ // toast.info("Transaction Send Successfully!", {
+ // position: "bottom-right",
+ // autoClose: 5000,
+ // hideProgressBar: false,
+ // closeOnClick: false,
+ // pauseOnHover: true,
+ // draggable: true,
+ // progress: undefined,
+ // theme: "light",
+ // transition: Bounce,
+ // });
+ // }, 1000)
+ }
+
+ return
+ }
+ }, [])
+
+
+
+ useEffect(() => {
+ if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
+
+ if (selectedDocuments === null || (Array.isArray(selectedDocuments) && !selectedDocuments.length)) {
+ dispatch(resetSelDoc())
+ }
+ dispatch(showLoader("Loading ..."));
+
+ if (documentSignType && transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_NOT_INITIATED) {
+ if (documentSignType === 'self-sign') {
+ console.log('Self Sign');
+ setTimeout(() => {
+ navigate('/process-step-one');
+ }, 1000)
+ return
+ } else if (documentSignType === 'multiple-sign') {
+ console.log('multiple-sign');
+ setTimeout(() => {
+ navigate('/process-step-one');
+ }, 1000)
+ return
+ }
+ }
+ dispatch(hideLoader());
+ }, [documentSignType])
+
+
+ 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 && (
+
+
+ {/* Top bar with logo and title */}
+
+
+
+
+ {/* Terms content scrollable */}
+ Sign Made Easy
+
+ {/* Gradient scroll hint */}
+
+
+
+
+
+ {/* Buttons */}
+ Welcome to Sign Made Easy! These Terms & Conditions govern your use of our application.
+By accessing our services, you agree to comply with and be bound by the following terms.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius placerat tellus, sed sodales odio cursus nec. Sed lacinia...
+Etiam in diam efficitur, congue lorem sed, malesuada orci. Aliquam bibendum purus nec velit fermentum laoreet. Integer finibus...
+We reserve the right to modify these terms at any time without prior notice. Continued use constitutes your acceptance of those changes.
+Thanks for choosing us to make signing easy, secure, and smooth. 🙌
+
+
+
+
+
+
+ {/*
+ )
+ }
+
+
+ {
+ user?.authorized &&
+
+ {/* Close Icon */}
+
+
+ {/* Success Icon */}
+
+ Transaction Successful
+Your transaction has been created and saved successfully.
+
+ {/* Complet DashBoard Back Side SideBar */}
+
}
+
+
+ )
+}
+
+export default Dashboard
\ No newline at end of file
diff --git a/src/components/dashboard/Loader.tsx b/src/components/dashboard/Loader.tsx
new file mode 100644
index 0000000..3f1093e
--- /dev/null
+++ b/src/components/dashboard/Loader.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import { LuSignature } from "react-icons/lu";
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store/store';
+
+
+const Loader = () => {
+
+ const loaderData = useSelector((state: RootState) => state.loader);
+
+ return (
+
+
+
+
+ {globalLoader.isLoading &&
+ {/* Main Content */}
+
+ {/* On Top Main Content - END */}
+
+
+
+ {/* Background */}
+ {/* */}
+
+
+ {/* Loader */}
+
+ )
+}
+
+export default Loader
\ No newline at end of file
diff --git a/src/components/dashboard/NavLink.tsx b/src/components/dashboard/NavLink.tsx
new file mode 100644
index 0000000..3c05c72
--- /dev/null
+++ b/src/components/dashboard/NavLink.tsx
@@ -0,0 +1,140 @@
+// import { useState } from "react";
+// import { IoIosArrowRoundForward } from "react-icons/io";
+import { Link, useLocation } from "react-router-dom";
+
+interface NavLinkProps {
+ to: string;
+ icon: React.ReactNode;
+ label: string;
+ showSideBar: boolean;
+ menuPathMap: Record
+
+
+
+ + {loaderData.message != undefined ? `${loaderData.message}` : 'Loading ...'} +
+{label}
} + + + + ); +}; + +export default NavLink; + + +// {label === "Transactions" ?
+//
+// {icon}
+// {showSideBar &&
:
\ No newline at end of file
diff --git a/src/components/dashboard/SendForSign.tsx b/src/components/dashboard/SendForSign.tsx
new file mode 100644
index 0000000..e30d913
--- /dev/null
+++ b/src/components/dashboard/SendForSign.tsx
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react'
+import { IoMdArrowDropdown } from "react-icons/io";
+import { IoIosSend } from "react-icons/io";
+import { useDispatch, useSelector } from 'react-redux';
+import { setSignType } from '../../store/slices/selectedDocsSlice';
+import { RootState } from '../../store/store';
+import { useNavigate } from 'react-router-dom';
+import { Bounce, toast } from 'react-toastify';
+// import { IoMdArrowDropright } from "react-icons/io";
+
+interface Props {
+ showSideBar: boolean;
+}
+
+const SendForSign: React.FC{label}
} +// + +//
+// setTransationFilter(TransactionFilterEnum.ALL)}
+// >
+// {showSideBar &&
+// All
} +// {transactionFilter === TransactionFilterEnum.ALL &&Draft
} +// {transactionFilter === TransactionFilterEnum.DRAFT &&Sent
} +// {transactionFilter === TransactionFilterEnum.SENT &&Completed
} +// {transactionFilter === TransactionFilterEnum.COMPLETE &&Declined
} +// {transactionFilter === TransactionFilterEnum.DECLINED &&Discarded
} +// {transactionFilter === TransactionFilterEnum.DISCARDED &&Canceled
} +// {transactionFilter === TransactionFilterEnum.CANCELED &&Expired
} +// {transactionFilter === TransactionFilterEnum.EXPIRED && setSendForSignDropdown(false)}
+ >
+
+ )
+}
+
+export default SendForSign
\ No newline at end of file
diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx
new file mode 100644
index 0000000..31e99ae
--- /dev/null
+++ b/src/components/dashboard/SideBar.tsx
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import NavLink from './NavLink';
+import SendForSign from './SendForSign';
+import { HiTemplate } from "react-icons/hi";
+import { BsLayoutSidebarInsetReverse, BsLayoutSidebarInset } from "react-icons/bs";
+import { FaHome } from "react-icons/fa";
+import { RiLogoutBoxLine } from 'react-icons/ri';
+import { IoSettingsOutline } from "react-icons/io5";
+
+import axios from 'axios';
+import { MdManageAccounts } from 'react-icons/md';
+
+type SideBarProps = {
+ showSideBar: boolean;
+ setShowSideBar: React.Dispatch setSendForSignDropdown(!sendForSignDropdown)}>
+
+
+ {/* Drop Down Box */}
+ {
+ sendForSignDropdown &&
+
+ {
+ showSideBar ?
+
+ {showSideBar && Send for signature
+ : +
+
+
+ }
+ handleSendSignDispatch('self-sign')}>
+
+
+ Self Sign
+You're the only signer.
+ handleSendSignDispatch('multiple-sign')}>
+
+ Send for Sign
+You and other need to sign.
+
+ {/* Menu */}
+
+
+ {/* Logout Confirmation Modal */}
+ {showLogoutModal && (
+
+
+
+ {/* SideBar Toggle Button */}
+ + {showSideBar ? 'Sign Made Easy' : 'SME'} +
+ +
+
+ setShowSideBar(!showSideBar)}
+ className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--highlightBg1)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
+ >
+
+
+ {showSideBar ? (
+
+
+ {/* Bottom Action Buttons */}
+
+
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default SideBar;
\ No newline at end of file
diff --git a/src/components/home/Cards.tsx b/src/components/home/Cards.tsx
new file mode 100644
index 0000000..dbe9be0
--- /dev/null
+++ b/src/components/home/Cards.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import { FaCheckCircle, FaClock, FaHourglassHalf, FaTasks } from 'react-icons/fa';
+
+const cards = [
+ {
+ title: 'Action Required',
+ count: 12,
+ icon:
+
+ Confirm Logout
+Are you sure you want to log out?
+
+
+
+
+
+ {/* Header */}
+
+ );
+};
+
+export default Cards;
diff --git a/src/components/home/FilterSort.tsx b/src/components/home/FilterSort.tsx
new file mode 100644
index 0000000..bfcc415
--- /dev/null
+++ b/src/components/home/FilterSort.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { MdFilterList } from "react-icons/md";
+import { IoCaretDownOutline } from "react-icons/io5";
+import { FaSort } from "react-icons/fa";
+
+
+
+const FilterSort = () => {
+ return (
+
+
+
+
+
+ {/* Cards */}
+ Overview
+ +
+ {/* Account Selector */}
+
+
+ {/* Date Filter */}
+
+
+
+ {cards.map((card) => (
+
+
+
+ ))}
+
+
+
+ {card.icon}
+
+
+
+ {card.title}
+{card.count}
+
+
+ )
+}
+
+export default FilterSort
\ No newline at end of file
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
new file mode 100644
index 0000000..7042022
--- /dev/null
+++ b/src/components/home/Home.tsx
@@ -0,0 +1,22 @@
+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 = () => {
+ return (
+ <>
+
+
+
+
+ Filter
+
+
+ Sort
+Home
+ +
+ {/* Notification + Settings with smaller gap */}
+
+
+
+
+
+
+
+ {/* Avatar with separate spacing */}
+
+ {user.picture ? (
+
+ ) : (
+ initials
+ )}
+
+
+ {documents.map((doc, idx) => (
+
+ )} */}
+
+ {documents.length > 0 && (
+
+
+ ))}
+
+ handleSelect(doc.id)}
+ />
+
+
+ {doc.extension === "pdf" ? (
+
+ .{doc.extension}
++ {doc.original ? "Original" : "Signed"} +
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default ShowDocs;
diff --git a/src/components/home/StartSection.tsx b/src/components/home/StartSection.tsx
new file mode 100644
index 0000000..05c5ee7
--- /dev/null
+++ b/src/components/home/StartSection.tsx
@@ -0,0 +1,118 @@
+import axios from 'axios';
+import React, { ReactNode, useEffect } from 'react';
+import { FiUpload, FiEdit, FiFolder, FiArrowRight } from 'react-icons/fi';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { AppDispatch, RootState } from '../../store/store';
+import api from '../../config/api';
+import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
+
+
+interface StartCard {
+ icon: ReactNode;
+ title: string;
+ description: string;
+ buttonText?: string;
+ bg: string;
+}
+
+const cards = [
+ {
+ icon: | + | Name | +Type | +Status | ++ |
|---|---|---|---|---|
|
+ {/* handleSelect(doc.id)}
+ className="form-checkbox text-blue-600"
+ /> */}
+
+
+ {selectedDocs.includes(doc.id) &&
+ |
+ + + | ++ {doc.extension} + | ++ + {doc.original ? "Original" : "Signed"} + + | + {/*
+ | */}
+
Get Started
+ +
+ {cards.map((card, index) => (
+
+ handleStartSectionClick(card)}
+ key={index}
+ className={`${card.bg} cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all h-full flex flex-col justify-between min-h-[220px]`}
+ >
+ {/* Icon + Text */}
+
+ ))}
+
+
+
+ {/* Bottom Area */}
+
+ {card.icon}
+
+
+ {card.title}
+{card.description}
+
+ {card.buttonText ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default UploadDoc;
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
new file mode 100644
index 0000000..ddf7096
--- /dev/null
+++ b/src/components/login/Login.tsx
@@ -0,0 +1,13 @@
+import UserAuthUI from "../auth/UsertAuthUI"
+
+function Login() {
+ return (
+ <>
+ document.getElementById("file-input")?.click()}
+ onDragOver={(e) => e.preventDefault()}
+ onDrop={handleDrop}
+ >
+
+
+
+
+
+ {/* {files.length > 0 && (
+ Upload or drag & drop files
+PDF, DOCX, JPG, PNG, TXT (max 10MB)
+
+
+ )} */}
+ Files
+
+ {files.map((file, index) => (
+
+
+ {file.name}
+ setFiles(files.filter((_, i) => i !== index))}
+ className="text-gray-400 hover:text-red-500 cursor-pointer transition"
+ />
+
+ ))}
+
+
+
+ )
+}
+
+export default Login
diff --git a/src/components/modal/ProcessStepModal.tsx b/src/components/modal/ProcessStepModal.tsx
new file mode 100644
index 0000000..ba055a3
--- /dev/null
+++ b/src/components/modal/ProcessStepModal.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { LuSignature } from "react-icons/lu";
+import { IoMdClose } from "react-icons/io";
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../store/store';
+import { hideModal } from '../../store/slices/modalSlice';
+import { setSignType } from '../../store/slices/selectedDocsSlice';
+
+const ProcessStepModal = () => {
+ const dispatch = useDispatch();
+ const modalState = useSelector((state: RootState) => state.modal);
+
+ const handleCloseBtnClick = () => {
+ dispatch(hideModal());
+ dispatch(hideModal());
+ }
+
+ return (
+
+ {/* Background */}
+
+
+ {/* Modal */}
+
+ )
+}
+
+export default ProcessStepModal
\ No newline at end of file
diff --git a/src/components/modal/SignModal.tsx b/src/components/modal/SignModal.tsx
new file mode 100644
index 0000000..568d487
--- /dev/null
+++ b/src/components/modal/SignModal.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { LuSignature } from "react-icons/lu";
+import { IoMdClose } from "react-icons/io";
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../store/store';
+import { hideModal } from '../../store/slices/modalSlice';
+import { setSignType } from '../../store/slices/selectedDocsSlice';
+
+const SignModal = () => {
+ const dispatch = useDispatch();
+ const modalState = useSelector((state: RootState) => state.modal);
+
+ const handleCloseBtnClick = () => {
+ dispatch(hideModal());
+ }
+
+ const handleSignStateUpdate = (type: "self-sign" | "multiple-sign") => {
+ dispatch(setSignType(type))
+ dispatch(hideModal());
+ }
+
+ return (
+
+
+
+
+
+ Discard Changes
+
+
+
+ All changes you have made to this form will be discarded
+
+
+
+
+
+ {/* Background */}
+
+
+ {/* Modal */}
+
+ )
+}
+
+export default SignModal
\ No newline at end of file
diff --git a/src/components/process/ProcessTopNav.tsx b/src/components/process/ProcessTopNav.tsx
new file mode 100644
index 0000000..d665baf
--- /dev/null
+++ b/src/components/process/ProcessTopNav.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const ProcessTopNav = () => {
+ return (
+
+
+
+
+ Document Uploaded {modalState.message && `( ${modalState.message} )`}
+
+
+ {/* Self Sign - START */}
+
+ handleSignStateUpdate('self-sign')}
+ >
+
+ {/* Self Sign - END */}
+
+ {/* Multi Sign - START */}
+
+
+ Self Signature
+You're the only signer.
+ handleSignStateUpdate('multiple-sign')}
+ >
+
+ {/* Multi Sign - END */}
+
+
+
+ Send for Signature
+You and other need to sign.
+ProcessTopNav
+ )
+}
+
+export default ProcessTopNav
\ No newline at end of file
diff --git a/src/components/process/RecipientAddCard.tsx b/src/components/process/RecipientAddCard.tsx
new file mode 100644
index 0000000..f85a325
--- /dev/null
+++ b/src/components/process/RecipientAddCard.tsx
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { FaPlus } from "react-icons/fa";
+
+type RecipientAddCardProps = {
+ addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed
+};
+
+const RecipientAddCard: React.FC
+
+ );
+};
+
+export default RecipientAddCard;
\ No newline at end of file
diff --git a/src/components/process/processStepOne/ContactModal.tsx b/src/components/process/processStepOne/ContactModal.tsx
new file mode 100644
index 0000000..88ba9e6
--- /dev/null
+++ b/src/components/process/processStepOne/ContactModal.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { ContactTypeObj } from './RecipientAddCard'
+import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
+
+interface ContactDataProps {
+ contactData: ContactTypeObj;
+ inpFirstName: string;
+ inpLastName: string;
+ inpEmail: string;
+ openContactModal: boolean;
+ setOpenContactModal: React.DispatchAdd Recipient Details
+
+
+
+
+
+
+
+
+
+
+
+ {[
+ { label: "Mail To Sign", value: "mailToSign" },
+ { label: "In-Person", value: "inPerson" },
+ { label: "CC", value: "cc" }
+ ].map((option) => (
+
+ ))}
+
+
+
+
+ handleContactClick(indx)}
+ style={{display: `${openContactModal ? "flex" : "none"}`}}
+ className='flex items-center px-3 py-2 cursor-pointer hover:bg-slate-100 transiton-all w-full'>
+
+
+ })
+ }
+
+ )
+}
+
+// return
+
+
+
+ + {recipient.firstName} +
++ {recipient.lastName} +
++ {recipient.email} +
++// {val.firstName} +//
+export default ContactModal \ No newline at end of file diff --git a/src/components/process/processStepOne/DocumentCard.tsx b/src/components/process/processStepOne/DocumentCard.tsx new file mode 100644 index 0000000..9ee982d --- /dev/null +++ b/src/components/process/processStepOne/DocumentCard.tsx @@ -0,0 +1,201 @@ +import React, { useEffect, useState } from 'react' +import { FaFileAlt, FaCheckCircle, FaUpload } from 'react-icons/fa' +import { MdFileUpload } from 'react-icons/md' +import { RiDraggable } from 'react-icons/ri' +import { deleteDocument, setDocProgComplete } from '../../../store/slices/documentSlice' +import { useDispatch } from 'react-redux' +import { AppDispatch } from '../../../store/store' +import { IoMdClose } from 'react-icons/io' +import api from '../../../config/api' +import { useParams } from 'react-router-dom' + +interface DocumentCardProps { + id: string; + name: string; + isCompleted: boolean; +} + +const DocumentCard: React.FC
+ setDocumentDel({ docId: id, isDel: false }) }
+ className='absolute right-2.5 top-2.5 text-slate-400 text-xl hover:text-red-500 cursor-pointer transition-all' />
+ {/* Draggable handle */}
+ e.dataTransfer.setData('text/plain', id)}
+ className="absolute top-2 left-2 text-gray-400 text-lg cursor-grab drag-handle"
+ />
+
+ {/* Main icon or circular loader */}
+
+
+
+
+ {
+ documentDel.docId !== null &&
+ {!isCompleted ? (
+
+
+ {/* Document name */}
+
+ {name}
+
+
+ {/* Status message */}
+ {message}
+
+
+
+ ) : (
+
+ {progress}%
+
+
+
+
+
+ }
+
+
+
+
+ )
+}
+
+export default DocumentCard
diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx
new file mode 100644
index 0000000..bfd4797
--- /dev/null
+++ b/src/components/process/processStepOne/ProcessStepOne.tsx
@@ -0,0 +1,255 @@
+import { IoMdClose } from "react-icons/io";
+
+import RecipientAddCard from './RecipientAddCard';
+import RecipientCards from './RecipientCards';
+import SelectedDocuments from "./SelectedDocuments";
+import api from "../../../config/api";
+import { useDispatch, useSelector } from "react-redux";
+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, 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";
+import { Bounce, toast } from "react-toastify";
+import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
+
+const ProcessStepOne = () => {
+ interface EmailDtls {
+ subject: string;
+ message: string;
+ }
+
+ 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)
+
+ const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
+ const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
+
+
+ useEffect(() => {
+ selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
+ selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
+ }, [])
+
+ // const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)
+ // const user = useSelector((state: RootState) => state.user)
+
+ const [emailDtls, setEmailDtls] = useState
+
+ Confirm Delete
+Are you sure you want to delete?
+
+
+
+
+
+
+ {/* Top Navigation */}
+
+
+
+ {/* Main Content */}
+
+
+
+ Add Recipient and Message
+
+
+
+
+
+
+ {/* Documents */}
+
+
+
+ {/* Recipients */}
+
+
+
+ {/* Email */}
+
+ Email
+ + {/* Subject */} +
Documents
+Signers
+
+
+
+
+ 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)]"
+ />
+
+
+ {/* Message */}
+
+
+