temp

package.json

@@ -9,7 +9,7 @@
     "build:skip-check": "tsc --noEmit && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "deploy": "npm run build:skip-check && scp -i private\\SME-Web.pem -r dist root@52.10.89.255:/var/www/sme"
+    "deploy": "npm run build:skip-check && scp -i private\\SME-Web.pem -r dist root@100.22.185.166:/var/www/sme"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -87,6 +87,7 @@ const ProcessStepOne = () => {
 
   const [templateName, setTemplateName] = useState('Untitled');
   const [isTyping, setIsTyping] = useState(false);
+  const [signingOrder, setSigningOrder] = useState(false)
 
   // Optional: use a timer to detect pause in typing
   let typingTimeout = null;
@@ -512,6 +513,24 @@ const ProcessStepOne = () => {
                     <label htmlFor="default-checkbox" className="ms-2 text-sm flex gap-1 text-slate-600">
                       I AM THE ONLY SIGNER</label>
                   </div> */}
+
+
+
+
+                  {/* HERE WE AREEEEEEEE */}
+                  <div className="flex items-center">
+                    <input
+                      // checked={signType == SignTypeEnum.selfSign}
+                      onChange={() => setSigningOrder(!signingOrder)}
+                      id="default-checkbox" type="checkbox" value="" className="w-4 h-4 checked:bg-[var(--mainPrimaryBtn)] bg-gray-100 border-gray-300 rounded-sm outline-none"
+                    />
+                    <label htmlFor="default-checkbox" className="ms-2 text-sm flex gap-1 text-slate-600">
+                      Set signing order
+                    </label>
+                  </div>
+                  {/* HERE WE AREEEEEEEE */}
+
+
                 </div>
               }
 
@@ -526,6 +545,7 @@ const ProcessStepOne = () => {
                     // setEditRecipientsModal={setEditRecipientsModal}
                     submitError={submitError}
                     isModal={false}
+                    signingOrder={signingOrder}
                   />
                 </>
               }

src/components/process/processStepOne/RecipientCards.tsx

@@ -53,6 +53,7 @@ type CardsData = {
     transactionTemplateToggle: string;
     editRecipientCurrentEmail: string;
     setEditRecipientCurrentEmail: (email: string) => void;
+    signingOrder: boolean;
 };
 
 const RecipientCards = ({
@@ -62,6 +63,7 @@ const RecipientCards = ({
     editRecipient,
     editRecipientCurrentEmail,
     setEditRecipientCurrentEmail,
+    signingOrder // signing order - Routing order
 }: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
     let { accountId, transactionId } = useParams<{ accountId: string; transactionId: string }>();
@@ -389,15 +391,17 @@ const RecipientCards = ({
                                     >
                                         <div
                                             key={recipient.email + idx}
-                                            className={`relative flex flex-col lg:flex-row lg:items-center justify-between px-2 sm:px-3 lg:px-2 py-3 transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail
+                                            className={`relative flex flex-col lg:flex-row lg:items-center justify-between transition-colors gap-3 lg:gap-0 ${(recipient.uuid || recipient.id) == editRecipientCurrentEmail
                                                 ? "bg-neutral-100 opacity-40"
                                                 : ""
                                                 }`}
                                         >
+
+                                            <>
                                                 {/* Main Content Section */}
-                                            <div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1">
+                                                <div className="flex items-start sm:items-center gap-2 sm:gap-3 min-w-0 flex-1 pl-8">
                                                     {/* Order Number */}
-                                                {recipients.length > 1 ? (
+                                                    {recipients.length > 1 && signingOrder ? (
                                                         <div className="relative flex-shrink-0">
                                                             <input
                                                                 type="text"
@@ -427,6 +431,8 @@ const RecipientCards = ({
                                                             </p>}
                                                         </div>
                                                     ) : (
+
+                                                        <>{signingOrder &&
                                                             <input
                                                                 type="number"
                                                                 disabled
@@ -439,7 +445,8 @@ const RecipientCards = ({
                                                                     )
                                                                 }
                                                                 className="w-6 sm:w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)] flex-shrink-0"
-                                                    />
+                                                            />}
+                                                        </>
                                                     )}
 
                                                     {/* Avatar */}
@@ -613,6 +620,10 @@ const RecipientCards = ({
                                                         </button>
                                                     </div>
                                                 )}
+                                            </>
+
+
+
                                         </div>
 
                                     </SortableRecipient>

src/components/process/processStepOne/RecipientsCon.tsx

@@ -19,10 +19,11 @@ interface RecipientsConIntProps {
     userData: UserState;
     isModal: boolean;
     submitError?: FormSubmitInt;
-    setEditRecipientsModal?: React.Dispatch<boolean>
+    setEditRecipientsModal?: React.Dispatch<boolean>;
+    signingOrder?: boolean;
 }
 
-const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateToggle, accountId, transactionId, userData, submitError, isModal = true, setEditRecipientsModal }) => {
+const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateToggle, accountId, transactionId, userData, submitError, isModal = true, setEditRecipientsModal, signingOrder }) => {
     const dispatch = useDispatch<AppDispatch>()
 
     const topRef = useRef<HTMLDivElement | null>(null);
@@ -144,6 +145,7 @@ const RecipientsCon: React.FC<RecipientsConIntProps> = ({ transactionTemplateTog
                             editRecipient={editRecipient}
                             setEditRecipientCurrentEmail={setEditRecipientCurrentEmail}
                             editRecipientCurrentEmail={editRecipientCurrentEmail}
+                            signingOrder={signingOrder}
                         />
                         {submitError && submitError.showError && <p
                             className="text-xs text-right px-2 pt-2 text-red-500">

vite.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
   base: '/',
   plugins: [react(), tailwindcss()],
   server: {
+    port: 5174,
     allowedHosts: [
       'quality-friendly-goldfish.ngrok-free.app',
       'officially-powerful-goat.ngrok-free.app',